nuxt部署和持續集成ci cd

時間 2021-02-17

標籤 html 前端 node linux git github web shell npm json 欄目 HTML 简体版

原文原文鏈接

這裏說下如何作nuxt得部署html

首先咱們得nuxt.config.js配置添加

主機爲何步驟爲0.0.0.0
參考這裏
https://blog.csdn.net/ttx_lau...前端

https://blog.csdn.net/u012814...node

https://blog.csdn.net/enzocha...linux

首先準備工做：
首先把咱們得nuxt項目執行:
npm run build 進行打包
而後本地npm run start 啓動一個生產web服務器本地看看有沒有問題
肯定沒問題以後把.nuxt 和static，nuxt.config.js,package.json,package.json,package-lock.json打包壓縮成zip文件git

其次準備一臺linux服務器：
我這裏是在https://console.ucloud.cn/ 這裏買的。

而後配置外網防火牆 3000對外開放(咱們部署服務得端口)
而後咱們下載一個Xshell 6 來鏈接咱們得linux服務器而後
xshell 簡單使用
下載 node
https://www.cnblogs.com/ruir/...
這裏是node得安裝和node和npm環境變量得配置（版本看本身須要下）.
而後更改npm 得源地址或者下載cnpm或nrm 設置鏡像.
國外源地址太慢了
而後設置npm全局下載包得環境變量問題
npm全局下載包環境變量問題解決github

而後若是以爲Xshell 6上傳文件不方便得話能夠用xftp來鏈接服務器
而後咱們在服務器上新建一個文件夾把而後把咱們得壓縮包zip放到裏面來而後解壓縮.web

而後在這個文件夾裏執行下載生產依賴的操做 npm install --production shell

最後執行 npm run start npm

這會咱們經過咱們服務器的外網ip加咱們部署的端口應該就能夠訪問到了。例如個人就是http://106.75.104.214:3000/json

可是這回咱們一旦ctrl+c 服務就會結束了

咱們再經過 pm2來管理咱們的服務

首先下載npm i pm2 -g下載爲全局依賴

而後pm2 start npm -- start
來啓動咱們當前npm 腳本而且傳入start參數

而後pm2 list而後咱們就能夠看到

咱們name 爲npm的這項已經被管理起來了,我這裏是把npm這項中止了

這會日常的部署就完成了，可是咱們每次部署都要這樣手工作的話就太麻煩了，咱們在這裏瞭解下cicd 持續集成部署.

咱們這裏使用git Actions爲例子
main.yml 配置解釋
https://coldstone.fun/post/20...
你們也能夠多搜索瞭解下相關解釋.

首先：

在本身的github 的setting中開發者設置生成token
而後把token 添加到項目的secrets中
配置github執行腳本
在項目根目錄建立 .github/workflows 目錄
下載main.yml 道workflows目錄
修改配置
配置pm2配置文件
提交更新
查看自動部署狀態

後續在main.yml中要使用

而後在項目.github/workflows生成 main.yml

main.yml

name: Publish And Deploy Demo
on:
  push:
    tags:
      - 'v*'
      # 提交一個標籤 tag的時候 纔會觸發 自動部署  以v開頭的 例如v0.0.1
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

    # 下載源碼
    - name: Checkout
      uses: actions/checkout@master 
      # 下載本次 tag標籤標記 commitId代碼



    # 打包構建
    - 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
    # 基於此次的tag標籤來下載依賴 打包 而後把 後續幾個文件生成  tgz 壓縮包

    # 發佈 Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
        # 開始建立寫入到項目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:
        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 }}
        # 端口號

        # 而後
        # 進入對應目錄
        # 下載壓縮的tgz到服務器
        # 解壓
        # 下載項目生成依賴
        # 而後經過 pm2 進行管理啓動
        script: |
          cd /root/realworld-nuxtjs
          wget https://github.com/544076724/nuxt-test/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

我這裏最後是在服務器有建立了realworld-nuxtjs目錄而後，把代碼當放到了這裏.

而後在項目根目錄中建立pm2.config.json

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

最後把代碼提交倉庫，根據咱們的main.yml配置老看普通的push是不會觸發構建的,只有push一個標籤 v開頭的纔會觸發構建流程

標籤的操做

而後咱們git tag -a "標籤內容<v0.1.0>" -m "標籤說明"

而後推送git push origin v0.1.0 推送

而後咱們到咱們的github倉庫能夠看到

這些標籤

在actions裏能夠看到

本次提交的標籤的構建

再點擊能夠看到執行過程

若是哪一步操做失敗會有失敗信息的x

經過這裏

咱們能夠看到咱們發的release的版本

和相關的tgz包

最後到服務器上咱們pm2 list

咱們就能夠看到咱們管理的 RealWorld進程.

pm2 reload 和pm2 restart 有啥區別
官方說明：As opposed to restart, which kills and restarts the process, reload achieves a 0-second-downtime reload.
簡單理解：
restart = stop+start
reload = 從新讀取配置文件
具體用哪一個要根據項目運行實際狀況，有些項目須要7*24運行，不得stop，這時候用reload比較好。

以後的每次操做就是生成不一樣的標籤而後提交, 這樣咱們的自動構建就完成了.

本文參考拉鉤大前端訓練營