如何将Laravel+Inertia+Vue3项目变更部署至开启SSR的DigitalOcean生产服务器

我正在处理一个客户的项目，已对Vue和SCSS文件进行了修改，想了解如何将这些变更部署至生产服务器。该网站部署在DigitalOcean服务器上，且已开启SSR（服务端渲染）。项目的package.json配置如下：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix && mix --mix-config=webpack.ssr.mix.js",
        "watch": "mix watch",
        "watch-server": "mix watch --mix-config=webpack.ssr.mix.js",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "mix --production && mix --production --mix-config=webpack.ssr.mix.js",
        "production": "mix --production",
        "server": "nodemon public/js/ssr.js"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "@vue/babel-plugin-jsx": "^1.1.1",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "nodemon": "^2.0.15",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue-loader": "^17.0.0"
    },
    "dependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@duannx/vue-client-only": "^1.0.3",
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/server": "^0.1.0",
        "@stripe/stripe-js": "^1.23.0",
        "@vue/compiler-sfc": "^3.2.31",
        "@vue/server-renderer": "^3.2.31",
        "@vuepic/vue-datepicker": "^3.1.0",
        "algoliasearch": "^4.13.1",
        "inertia-title": "^1.0.2",
        "jquery": "^3.6.0",
        "moment": "^2.29.1",
        "nprogress": "^0.2.0",
        "slick-carousel": "^1.8.1",
        "sprintf-js": "^1.1.2",
        "vue": "^3.2.31",
        "vue-instantsearch": "^4.3.3",
        "vue-slick-carousel": "^1.0.6",
        "vue-stripe-js": "^1.0.0",
        "vue-timer-hook": "^1.0.0",
        "vue-toastification": "^2.0.0-rc.5",
        "vue3-autocounter": "^1.0.6",
        "vue3-datepicker": "^0.3.2",
        "vue3-lazyload": "^0.2.5-beta",
        "vue3-select2-component": "^0.1.7",
        "vuedraggable": "^4.1.0",
        "webpack-node-externals": "^3.0.0"
    }
}

部署步骤 #

1. 本地构建生产资源 #

你的package.json已配置好生产构建命令prod，它会同时打包客户端和SSR服务端资源：

npm run prod

该命令会执行两个核心操作：

• mix --production：打包优化后的客户端静态资源（CSS、JS文件）
• mix --production --mix-config=webpack.ssr.mix.js：生成SSR服务端入口文件public/js/ssr.js

2. 同步代码到DigitalOcean服务器 #

将本地修改的源码和构建好的资源同步到服务器，推荐两种高效方式：

• Git同步：若项目用Git管理，本地提交变更后，登录服务器拉取最新代码：

  git pull origin main # 替换为你的实际分支名称
  

• RSync同步：直接同步指定目录，避免传输不必要的文件（如node_modules）：

  rsync -avz --exclude='node_modules' ./ your-server-user@your-server-ip:/path/to/project/
  

3. 安装新增依赖（如有） #

如果本次修改新增了npm依赖，需在服务器端安装生产环境依赖：

cd /path/to/project
npm install --production

4. 重启SSR服务 #

SSR服务依赖新构建的public/js/ssr.js，必须重启服务才能加载新资源：

• 若用nodemon管理服务（对应package.json的server命令）：

  cd /path/to/project
  npm run server
  

• 若用PM2等进程管理器托管服务：

  pm2 restart your-ssr-app-name # 替换为你的应用实际名称
  

关键注意事项 #

• 确保服务器Node.js版本与本地一致，避免依赖兼容问题
• 构建前可清理旧资源（如public/js、public/css目录），避免缓存干扰
• 建议配置Git Hooks或CI/CD脚本实现自动化部署，减少手动操作误差

内容的提问来源于stack exchange，提问作者masifmirza