NuxtJS项目部署方案 - 知乎

准备工作

Nuxtjs 项目在部署上线前，需要获取打包编译后的文件，然后再将此包部署到服务器。

需要配置 npm scripts，执行 build 命令 进行 webpack 打包，配置方案详细参见官文入口

图解 nuxt 命令，可参考进行配置。

除了生成项目打包文件，我们还需要做的步骤

  • 配置 项目的 服务端 Host+Port
  • 压缩发布包
  • 把发布包传到服务端 (SCP，FTP)
  • 在服务端解压包 (注意：此项目包不包括 package.json 中安装的第三方包)
  • 在服务端 安装项目依赖
  • 启动服务 （PM2）

部署方式了解

传统部署方式

  • 本地代码修改，如何同步修改服务器代码
  • 传统做法是，本地修改-> 本地重新构建 -> 压缩 发布到服务器

现代化部署方式(CI/CD)

  • 自动部署
  • CI / CD服务， 持续集成，持续部署服务 （github action，gitlab cicd，jenkins，travis ci....）
  • 通过四个平台实现自动化部署
  • 本地修改，push到远程仓库，把仓库代码下载到 CI/CD服务中，在服务内编译构建打包发布release，把release返给 远程仓库，方便记录和历史追溯，把release部署到生产服务器

Github Actions 自动化部署方案

原理

将项目代码上传到github，github actions帮助我们安装依赖，打包编译，并把生产的release发给终端服务器，实现自动化

上传后配置 actions

配置 secret

  • 其实就是配置 我们服务器的信息，host（ip），username（root），password，port（22）
  • 配置这些的目的是为了让github actions 运行脚本时能获取要连接的你的服务器。
  • 举一个配置方案如下

其他字段依次配置就好了。

编辑 workflows 脚本

  • 项目根目录下创建 .github/workflows 目录
  • 内部新建文件 main.yml，用户actions执行得脚本
  • 这个脚本用来执行 自动部署操作，包括获取项目 上传到服务器，解压，安装依赖，以及 重启服务器运行项目
name: Publish And Deploy Demo
on:
  push:
    tags:
      - 'v*' // 提交标签版本，不是每次push，cicd都去自动部署

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest //任务运行在 ubuntu系统上（虚拟操作系统）
    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.tgz

    # 发布 Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }} // 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 }}  // 用到我们设置的 TOKEN了
      with:
        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: ${{ secrets.HOST }}  
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        port: ${{ secrets.PORT }}
        script: |                // 运行在远程服务器的命令
          cd /root/realworld-nuxtjs // 确保 root下有此文件目录，没有新建
          wget https://github.com/Mcgee0731/realworld-nuxtjs/releases/latest/download/release.tgz -O release.tgz // 下载上传的release到服务器（使用我们自己的github仓库）
          tar zxvf release.tgz // 解压
          npm install --production // 安装依赖
          pm2 reload pm2.config.json // 运行pm2（启动了则重启）

如果我们希望使用 pm2 进行 项目管理 需要给项目配置 pm2.config.json

// pm2.config.json

{
  "apps":{
    "name":"RealWorld",
    "script:"npm",  // 脚本
    "args":"start" // 参数
  }
}

从上面配置的脚本可以看出，如果我们希望自动部署则需要触发 tag v开头..

因此执行

git tag v0.1.0 
git push origin v0.1.0  // 推送标记版本号

此时我们可以通过 github 查看 项目脚本执行步骤

执行完成后，浏览器通过你自己的ip访问此项目，可以看到正常运行了，

更新是一样的操作，只要触发 tag，然后再push上去就会触发.

原网址: 访问
创建于: 2022-09-14 01:21:57
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论