Nuxt发布部署

狐七 SSR

我们在发布部署之前，需要对Nuxt.js的应用进行打包。然后将打包的结果部署到生产服务器。

Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署

命令	描述
nuxt	启动一个热加载的Web服务器（开发模式） `localhost:3000`。
nuxt build	利用webpack编译应用，压缩JS和CSS资源（发布用）。
nuxt start	以生产模式启动一个Web服务器 (需要先执行 nuxt build )。
nuxt generate	编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。

这次因为我们配置的是服务端渲染的页面，并不是静态站点，所以暂不考虑nuxt generate

# 打包

我们需要在package.json中进行配置

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }

1
2
3
4
5

在命令行执行npm run build
完成之后可以看到目录中.nuxt文件夹下面有一个dist文件夹，.nuxt文件整个就是打包生成的目录。

这个时候我们去验证一下打包结果npm run start，这个时候可以看到很快就启动了，dev的时候需要先去打包构建，start不需要，他运行的是build的结果，所以很快。这个时候点击http://localhost:3000/可以看到生成的结果。

# 部署

# 一、最简单的部署方式

如何将打的包发布到生产服务器中运行。

配置Host + Port
压缩发布包
把发布包传到服务端
解压
安装依赖
启动服务

在nuxt.config.js中添加server配置

// host默认是localhost，这个只提供本机服务，如果要提供外部访问，这里要设置成0.0.0.0，他就会监听所有的网卡地址。如果是本地就是整个局域网都可以访问到。
// port默认是3000,
server: {
    host: '0.0.0.0',
    port: 3000
}

1
2
3
4
5
6

我们需要把什么文件传到服务器呢?

.nuxt
static
nuxt.config.js (配置文件)
package.json (安装依赖)
package-lock.json (安装依赖)

将这每个文件选中，打一个realworld-nuxtjs.zip文件，然后登录服务器上传文件

ssh root@www.hu77.top
# 在root目录
mkdir realworld-nuxtjs
cd realworld-nuxtjs/
pwd # 可以看到当前路径是：/root/realworld-nuxtjs
# 对路径进行复制之后退出
exit
# scp是linux系统下本地向服务端传输的工具
# scp <本地文件> <服务器:文件目录>
scp .\realworld-nuxtjs.zip root@www.hu77.top:/root/realworld-nuxtjs

1
2
3
4
5
6
7
8
9
10

上传完成之后登录服务器

ssh www.hu77.top
cd realworld-nuxtjs/
ls
# realworld-nuxtjs.zip
# unzip 对目录进行解压
unzip realworld-nuxtjs.zip
ls -a  # ls不能显示隐藏目录，如果用-a可以显示隐藏目录
npm i # 将依赖包安装一下
npm run start # 启动起来

1
2
3
4
5
6
7
8
9

5.访问http://www.hu77.top:3000/即可。

# 使用PM2启动Node服务

我们服务器启动npm run start的时候，如果退出，就访问不了页面了，那需要PM2进行后台管理。

PM2专门是用来管理node.js的应用，通过它就可以把node.js相关的应用运行在后台，保持运行状态。

pm2-github (opens new window)
官方文档 (opens new window)
安装：npm i --global pm2
启动：pm2 start 脚本路径

登录服务器

ssh root@www.hu77.com
# 在服务器上全局安装
npm i -g pm2
pm2 start npm -- start # 给 npm 传参 start之后，给pm2进行管理

1
2
3
4

下面这个就是启动成功的

停止服务器

# pm2 stop 服务的id值
pm2 stop 0

1
2

# pm2常用命令

命令	说明
pm2 list	查看应用列表
pm2 start	启动应用
pm2 stop	停止应用
pm2 reload	重载应用 (开启多线程，保持进程的情况下一个一个重启，推荐)
pm2 restart	重启应用 (先将原有程序杀死，再起新的进程)
pm2 delete	删除应用

# 二、自动化部署(CI/CD)

刚才传统的部署方式，有很严重的缺点：

如果本地代码更新了，需要本地构建，然后连接到服务器，解压压缩，安装依赖再重启。很繁琐。所以需要一种更好的部署方式去做。

现代化部署方式(CI/CD)，持续集成，持续部署。通过下面四个平台来帮我们自动部署。

# CI/CD 服务

Jenkins（适合专业的运维人员使用）
GitLab CI（一般公司用）
GitHub Actions
Travis CI
Cricle CI
...

这些目标都是用来持续集成，持续部署的。现在选择使用github Actions实现自动部署。

# 环境准备

Linux服务器
- www.hu77.top
把代码提交到GitHub远程仓库
- nuxt-realWorld-classDemo (opens new window)

# 配置GitHub Access Token

作用：在CI/CD中要使用到的GitHub的身份令牌，操作gitHub仓库的权限。

在github用户 > settings > Developer settings > Personal access tokens中添加一个新token
下面勾选第一个，然后保存

拿到最新的token，这里只显示一次，所以最好复制然后保管起来：
找到项目中的settings > Secrets > 新建secret > 名字TOKEN > Value就是刚才生成的token > 添加成功

# 配置 GitHub Actions 执行脚本

在项目根目录创建 .github/workflows 目录
从这个上面下载main.yml文件放到 workflows 目录下 main.yml (opens new window)
根目录下创建pm2.config.json文件

// 我们要用pm2启动脚本应用，名字是RealWorld，脚本是npm，参数是start，它帮我们执行了脚本命令。
{
  "apps": [{
    "name": "RealWorld",
    // 启动脚本
    "script": "npm",
    // 脚本参数
    "args": "start"
  }]
}

1
2
3
4
5
6
7
8
9
10

在打压缩包的时候加上pm2.config.json

# 把需要的文件打一个压缩包
- run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json

1
2

看一下所有的执行命令

# 自动部署的名称
name: Publish And Deploy Demo
# 当提交代码(有tag标签以v开头的时候)push的时候触发
on:
  push:
    tags:
      - 'v*'
# 执行的工作
jobs:
  # 编译和部署
  build-and-deploy:
    # 运行环境 ubuntu-linux
    runs-on: ubuntu-latest
    steps:

    # 下载源码
    - name: Checkout
      uses: actions/checkout@master

    # 打包构建
    - name: Build
      uses: actions/setup-node@master
    - run: npm install
    - run: npm run build
    # 把需要的文件打一个压缩包
    - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json

    # 发布 Release
    # 创建release，我们可以在release仓库中看到一个一个的版本
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        # 这里有使用到TOKEN
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        # 标签名称，release名称
        tag_name: ${{ github.ref }}
        release_name: Release ${{ github.ref }}
        # 是否是草稿，不是
        draft: false
        # 是否是预发布，不是是正式发布
        prerelease: false

    # 上传构建结果(刚才打包生成的tgz)到 Release
    - name: Upload Release Asset
      id: upload-release-asset
      uses: actions/upload-release-asset@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        # 上传的地址，上传的地址是通过创建release得到的
        upload_url: ${{ steps.create_release.outputs.upload_url }}
        # 上传的文件
        asset_path: ./release.tgz
        # 上传之后的文件名
        asset_name: release.tgz
        asset_content_type: application/x-tgz

    # 部署到服务器
    - name: Deploy
      uses: appleboy/ssh-action@master
      with:
        # 远程服务器的host，用户名，密码，端口号
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        port: ${{ secrets.PORT }}
        # 执行命令构建
        # cd 的目录要确保远程服务器中有
        # wget 将github的release包下载到远程服务器
        # tar 将压缩的发布包解压
        # npm i安装依赖
        # pm2 把服务启动
        script: |
          cd /root/realworld-nuxtjs
          wget https://github.com/a1burning/nuxt-realWorld-classDemo/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

下面要把远程仓库的信息配置到github仓库中 Secrets > 创建

USERNAME root
PORT 22
HOST www.hu77.top
PASSWORD *******
# 如果已经实现了免密登录，那么也可以使用私钥的形式去部署
KEY  私钥

1
2
3
4
5
6

# 提交push

先将本地提交之后push到远程，形成一个版本记录，这个时候不会触发更新

git push origin master

如果push要自动推送，需要设置tag

git tag v0.1.1

然后推送到远程的v0.1.1分支

git push origin v0.1.1

3，打开code中的release，可以看到release里面有大的版本的v0.1.1

看网页可以看到网站可以被访问。
修改路由和端口

router: {
    base: '/nuxt-realworld-classdemo',
    // 自定义高亮类名，默认nuxt-link-active
    linkActiveClass: 'active',
    // 自定义路由表规则
    extendRoutes(routes, resolve) {
      ...
    }
   },
   server: {
    host: '0.0.0.0',
    port: 80
}

1
2
3
4
5
6
7
8
9
10
11
12
13

6.按照上面的流程

git commit -m ''
git push origin master
git tag v0.1.4
git push origin v0.1.4

1
2
3
4

可以看到新的release，这样回滚的时候也正常。

# 三、扩展：部署到Vercel

参考：

https://github.com/nuxt/vercel-builder
https://nuxtjs.org/faq/now-deployment

创建vercel.json

{
  "builds": [
    {
      // 配置文件
      "src": "nuxt.config.js",
      // 用什么构建，官方的给服务端渲染方式的应用部署到vercel
      "use": "@nuxtjs/vercel-builder",
      "config": {}
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11

安装包

npm i @nuxtjs/vercel-builder

如果开启了PWA需要进一步配置，看官网
把项目推送到github(只支持三种远程仓库github、gitlab、Bitbucket)

登录vercel网站 https://vercel.com/dashboard
把远程仓库地址写进来

之后导入仓库

点击visit访问就可以看到项目。

PS：这里的项目要放在根目录下，有路径的要另外整。

// 不知道管不管用，先写着。以后有空测试一下。
  "rewrites": [
    { "source": "/(.*)", "destination": "/nuxt-hu77-realworld/$1" }
  ]

1
2
3
4

案例：Nuxt综合案例 Nuxt Q&A

狐七的个人博客

Choose mode