部署全栈项目--后端ts/前端react/vite

前提：前后端分别上传到GitHub

部署后端到render

dotenv修改

注意修改dotenv这里，判断当前模式如果不是production再调用config读取env文件，如果是部署阶段，就通过环境变量来获得。如果没有修改，部署到render时会出现这个报错。SyntaxError: Cannot use import statement outside a module

import { config } from 'dotenv'

if (process.env.NODE_ENV !== 'production')
  config ()

build命令

修改package.json里面scripts部分，build命令加上tsc，start命令注意路径为./dist

"scripts": {
  "build": "npm install&&tsc",
  "start": "node ./dist/index.js"
},

typescript部署到render需要编译

新建一个文件tsconfig.json，设置路径为./dist

{
    "compilerOptions": {
      "esModuleInterop": true,
      "outDir": "./dist"
    }
}

参考

https://yabai.tw/node/cookbook/read-env/
https://community.render.com/t/deploy-express-typescript-as-render-web-service/7374

https://technotrampoline.com/articles/deploying-a-typescript-express-application-to-render/

部署前端到github page

由于注册netlify一直出问题，决定把前端部署到github page。把前端的代码推到GitHub仓库上。然后配置以下文件。

安装gh-pages

npm install gh-pages --save-dev

修改vite.config.js和package json

vite.config.js把base改成对应的GitHub仓库名字，例如

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/xxx-frontend/" //修改这一行
})

package.json设置homepage和部署的命令

"name": "client",
"homepage": "https://xxxxx.github.io/xxxxxx-frontend/", //加上这一行
"scripts": {
  //....加上下面两行部署的命令
  "predeploy" : "npm run build",
  "deploy" : "gh-pages -d dist"
},

运行部署的命令

npm run deploy

GitHub上设置从gh-pages部署

到GitHub仓库的设置里面，Pages -> Branch里面选择gh-pages

react router需要加上basename

前端react用了react router，直接部署过去会到404页面，可以在createBrowserRouter这里加上basename

const router = createBrowserRouter([
  {
    element: <Layout />,
    children: routes,
  },
], { basename: import.meta.env.DEV ? '/' : '/{repository name}/' }) //这里加上basename

这里当运行npm run dev的时候import.meta.env.DEV会返回true，如果是发布前端，会在路径加上/{repository name}。

达到的效果就是，最终路径都要加上basename，如果有什么页面404注意检查一下所有涉及到路径的地方链接对不对。由于我参考了这篇博文加一层routing layer，所以navbar那里的链接没有加上/{repository name}/点开出错了。

navbar点开分页面失败404

由于react是一个单页面应用，部署的时候dist路径下生成的是一个index.html页面，当我们输入路径{repository name}/xxx例如xxx.github.io/{repository name}/about时并没有找到该about.html分页面，所以路径时出现了404。按照以上方式部署的需要修改package.json这里

"scripts": {
  "predeploy" : "npm run build && cp ./dist/index.html ./dist/404.html",
},

或者如果通过deploy.yml部署的可以修改成
run: npm run build && cp ./dist/index.html ./dist/404.html

参考

https://medium.com/@aishwaryaparab1/deploying-vite-deploying-vite-app-to-github-pages-166fff40ffd3

https://blog.devgenius.io/how-to-deploy-your-vite-react-app-to-github-pages-with-and-without-react-router-b060d912b10e?gi=4b8111ad82b7

参考链接

https://medium.com/@alexisbou16/mastering-the-launch-your-full-stack-app-deployment-guide-with-netlify-and-render-f7a9ff2b5800