nuxt部署学习记录

- 购买服务器

阿里云服务器

镜像 CentOS 7.9 64位

分配公网IPV4

密钥对（创建密钥对）

- 部署nuxt项目

手动部署

代码：https://gitee.com/olhong/learn-project/tree/master/part3/fed-e-task-03-03/realworld

打包项目 npm run build

启动打包结果 npm run start

本地查看启动的项目

配置Host+Port

在项目的nuxt.config.js中配置

server: {

host: '0.0.0.0',

port: 3000

}

压缩发布包

.nuxt static nuxt.config.js package.json package-lock.json -> nuxt-realwork.zip

把发布包传到服务端

连接服务器（可使用xshell 或阿里云自带的连接工具）

命令行连接 ssh root@ip地址输入密码即可

创建目录 mkdir realword-nuxtjs

退出连接 exit

上传文件 scp scp .\nuxt-realwork.zip root@47.96.24.44:/root/realwork-nuxtjs

解压

连接到服务器，安装unzip命令

yum install -y unzip zip

解压文件夹

unzip nuxt-realwork.zip

安装依赖

安装nvm

// 执行任意一行命令
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

有些文件下载失败，可以浏览器访问那些失败的文件，自己新建在服务器nvm目录下

重新连接远程服务器

如果出现这个错误 -bash: /root/nvm/nvm.sh: No such file or directory ，下载的文件默认在.nvm下，重新命名为nvm即可

下载对应的node版本

nvm install v16.16.0 和本地的node最好一致

启动服务

进入到realwork-nuxtjs下载依赖

cd realwork-nuxtjs

npm i

npm run start

运行成功后访问http://47.96.24.44:3000/

如果访问失败则需要查看是否关闭了防火墙，然后去阿里云添加安全组，运行端口的访问

项目部署成功后访问

自动部署

github仓库打不开解决方案：
https://tool.chinaz.com/dns?type=1&host=github.com&ip= 查询github.com的地址
C:\Windows\System32\drivers\etc
打开hosts
输入 20.205.243.166 github.com 保存
cmd 中输入 ipconfig/flushdns刷新

github仓库地址：https://github.com/OuLianhHong00/realword-nuxtjs

配置githubAccessToken

生成：https://github.com/settings/tokens

github上 settings/tokens personal access tokens -> generate new token

配置到项目的action secrets中

在项目根目录中创建文件.github\workflows\main.yml

name: Publish And Deploy Demo
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
    - 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 }}
      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 }}
        script: |
           cd /root/realworld-nuxtjs
          wget https://github.com/OuLianhHong00/realword-nuxtjs/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          nvm install 16.16.0
          nvm use 16.16.0
          npm install --production
          npm install pm2 -g
          pm2 reload pm2.config.json

注：远程服务器需要有这个目录 realworld-nuxtjs

script里的github地址也要改成自己的

根目录再创建pm2.config.json

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

在github上再创建USERNAME(root) POST(22) PASSWORD(远程仓库的密码) HOST(47.96.24.44)服务器地址

git add .

git tag v0.1.0

git tag

git push origin v0.1.0

购买服务器

部署nuxt项目

手动部署

自动部署