服务器端渲染-Nuxt.js综合案例发布部署

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

项目打包

命令列表

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

命令配置

将在项目中需要使用的命令添加至 package.json的scripts脚本中：

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

1.在执行nuxt start命令之前，必须先执行nuxt build进行生产环境打包
2.使用npm run <command> 或 yarn <command> 执行相应的命令，如 npm run dev 或 yarn dev

打包项目

在项目根目录下执行yarn build进行打包，打包成功后的文件如下图

1. 打包后的文件都在.nuxt文件中，且打包文件不止一个
2. 使用yarn start本地启动打包后的项目，如果启动正常 ，说明打包结果正确。
3. 启动打包后的项目速度要比启动nuxt项目快的多

发布部署

在本地将项目打包好以后，如果需要上线使用，就必须将本地包发布部署到目标服务器上，而实现打包部署的方式有很多种。

最基本的方式

最简单、最传统的方式，流程如下：
1、配置Host + Port
在nuxt.config.js设置Host + Port

//最简单方式
server: {
    
    
  host: '0.0.0.0', //设置为'0.0.0.0'会监听所有的网卡地址，使其能够对外进行访问
  port: 3000
},

2、压缩发布包
将经过nuxt build打包后的.nuxt、static、nuxt.config.js、package.json、package-lock.json,使用压缩工具进行压缩。

3、把发布包传到服务器
这里采用图形化工具 Xshell + Xftp（需要先在本地安装这两个软件）传输本地项目包到服务器。
打开Xshell，输入会话名称、主机IP地址、用户名、密码连接服务器：

连接好服务器以后，打开Xftp

将左侧的项目压缩包拖入右侧服务器的目标目录

4、 解压
在Xshell命令行进入压缩包所在目录，执行unzip命令解压缩文件包

5、安装依赖
首先需要在服务器上安装node.js,然后执行npm install安装项目依赖包。安装完以后如下图所示：

6、 启动服务

• 在Xshell命令行执行npm run start启动项目。
• 使用PM2启动node服务

在服务端直接使用npm start 在命令行启动项目后，一旦退出命令行，服务终止，不能被访问了。这里就要使用PM2工具启动项目。PM2是一个专门用来管理node.js进程的一个应用，可以使node.js进程运行在后台。

PM2常用命令：

命令	描述
pm2 list	查看pm2所管理的所有应用列表
pm2 start	启动应用
pm2 stop	停止应用
pm2 reload	重载应用
pm2 restart	重启应用
pm2 delete	删除应用

PM2使用：

//在服务端安装PM2
npm install --global pm2
//启动项目，如：pm2 start npm --start
pm2 start <command>

上面的这种方式是传统的项目部署方式，通过它的操作步骤，我们能明白项目部署的中间过程。但是如果我们本地的代码更新了，就要重复以上的步骤，更新服务器上的应用代码。这种方式简单，一旦更新频繁就很麻烦。

自动化部署

如上图所示，现代化的自动部署采用CI/CD即持续集成/持续部署方式。
CI/CD服务有很多种，如Jenkins、Gitlab CI、GitHub Actions、Travis CI、Circle CI...
下面以GitHub Actions为例：

环境准备

• Linux服务器
• 把本地代码提交到GitHub远程仓库
• 配置GitHub Access Token ，在CI/CD中使用GitHub的身份令牌操作GitHub仓库
  打开GitHub,点击右上角的用户头像，选择settings。
  
  在settings页面中，选择Developer settings，进入Developer settings页面。
  
  选择Personal access tokens ，点击Generate new token，在生成token页面填上Token的名字并勾选操作GitHub仓库的权限，并点击最下方的 Generate token 按钮
  
  返回页面就可以看到生成的token。
  

这里生成的token只显示一次，所以最好存储起来，方便使用

进入项目的GitHub仓库>点击settings> 点击secrets> 点击New secret ，进入新建secret页面，输入已经创建好的token，点击Add secret

• 配置GitHub Actions 执行脚本

1.在项目根目录下新建.github/workflows目录

这里的文件目录名字必须是.github/workflows，因为GitHub Actions要识别这个特定的文件目录并加载下面的文件

2.下载main.yml到.github/workflows中
下载链接：https://github.com/zimeng303/realworld-nuxt/blob/master/.github/workflows/main.yml

3.修改main.yml配置

注意：
1.这里的GITHUB_TOKEN必须和在github的secrets中创建的token名一致
2.其中HOST、USERNAME、PASSWORD、PORT必须和远程服务器的信息一致
3.将下载压缩包的地址修改为自己github上release的真实地址

name: Publish And Deploy Demo
# 提交 以 V 开头的命令时，才会触发自动部署
on:
  push:
    tags:
      - 'v*'

jobs:
  build-and-deploy:
    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
    # 打压缩包（release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json）
    - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json

    # 发布 Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${
    
    {
    
     secrets.TOKEN }} # 必须和在github的secrets中添加的token名一致
      with:
        tag_name: ${
    
    {
    
     github.ref }}
        release_name: Release ${
    
    {
    
     github.ref }}
        draft: false #不是草稿
        prerelease: false #不是预发布版

    # 上传构建结果到 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:
      	# 在Secrets中，配置远程服务器的HOST、USERNAME、PASSWORD、PORT
        host: ${
    
    {
    
     secrets.HOST }}
        username: ${
    
    {
    
     secrets.USERNAME }}
        password: ${
    
    {
    
     secrets.PASSWORD }}
        port: ${
    
    {
    
     secrets.PORT }}
        # 下面的 release 地址 ，修改为 自己的
        script: |
          rm -rf /root/realworld-nuxtjs/
          mkdir /root/realworld-nuxtjs
          cd /root/realworld-nuxtjs          
          wget https://github.com/***/****/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

将所需用到的 HOST 、PORT、USERNAME、PASSWORD ，配置到项目github的Secrets 中

4.创建PM2配置文件 pm2.config.json

{
    
    
    "apps": [
        {
    
    
           "name": "RealWorld",
           "script": "npm",
           "args": "start"
        }
    ]
}

5.向github提交更新

在项目根目录下依次执行以下命令

//本地提交
git add .
//本地打版
git tag v0.1.0
//将本地版提交到github仓库
git push origin v0.1.0

执行成功以后可以在github上看到提交的标签

actions 面板

6.查看自动部署状态
在release面板查看自动部署状态，部署成功会看到release包

7.在客户端访问站点

文章列表

服务器端渲染基础
服务器端渲染-Nuxt.js基础
服务器端渲染-Nuxt.js综合案例
服务器端渲染-Nuxt.js综合案例发布部署
服务器端渲染-Vue SSR搭建