Nuxt SSR 部署实践

部署时的困扰

使用 Nuxt 开发的项目 build 后上传到服务器时，每次都要选中 .nuxt、static、sitemap.js、nuxt.config.js、package-lock.json、package.json、Dockerfile 这些必要文件复制到一个文件夹再上传，十分麻烦。于是再闲余时间简单写了一个 deploy 脚本用于把这些文件复制到 deploy 目录。

部署最佳实践

新建 deploy.sh

在项目根目录新建 deploy.sh，目的是将 build 后所用到的文件复制到自定义的 deploy 目录（该目录用于上传到服务器）。

#!/usr/bin/env sh

set -e

echo "> npm run build"
npm run build

if [ ! -d "deploy" ]; then
  echo "> create deploy folder"
  mkdir deploy
  else 
  echo "> remove old deploy files"
  rm -rf deploy/*
fi

echo "> copy deploy files（以下复制源码中所用上的文件）"
cp -r .nuxt ./deploy/
cp -r static ./deploy/
cp -r nuxt.config.js ./deploy/
cp -r package-deploy.json ./deploy/
cp -r Dockerfile ./deploy/

echo "  finish!"
sleep 120s

新增 NPM Script

在项目的原 package.json 文件，追加运行脚本（“deploy”: “deploy.sh”），该脚本用于运行 deploy.sh。

{
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "deploy": "deploy.sh" // 运行 deploy 脚本
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/sitemap": "^2.4.0",
    "axios": "^0.21.1",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
  },
  "devDependencies": {
    "@nuxtjs/google-analytics": "^2.4.0",
    "autoprefixer": "^9.8.6",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
    "postcss": "^7.0.35",
  }
}

新增 Dockerfile（可选）

有用到 Docker 的可以参考新增的 Dockerfile 文件。

FROM node:14.4.0
RUN mkdir -p /app
COPY . /app
WORKDIR /app
EXPOSE 3000
RUN npm install
CMD ["npm","run","start"]

打包和部署

打开项目，在本地环境依次执行命令：

npm run build
npm run deploy

命令执行完后，可以看到项目多了 deploy 目录，把这个目录上传到服务器，执行 Dockerfile，或者在服务器环境中执行如下命令：

npm install
npm run start

这样项目就部署好了。