Nuxt.js发布部署

使用命令打包

https://zh.nuxtjs.org/guide/commands

1. 配置命令，package.json中添加如下内容、

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

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

   执行npm run build

2. 最简单的部署方式、

   • 配置Host + Port

     // nuxt.config.js
     server: {
       host: '0.0.0.0',// 监听所有外网地址。在生产环境服务器上外网环境就能访问到了，在本地的话，局域网都能访问到了
         port: 3000
     },
     
     

   • 压缩发布包

     • .nuxt文件夹（Nuxt打包生成的资源文件）
     • static文件夹（项目中的静态资源）
     • nuxt.config.js（给Nuxt服务来使用的）
     • package.json （服务端要安装第三方包）
     • package-lock.json

   • 发布到服务器端

     • 登录服务器ssh root@113.31.154.5
     • 选择一个目录创建一个realworld-nuxtjs文件夹：mkdir realworld-nuxtjs\
     • cd realworld-nuxtjs进入这个文件夹
     • 回到本地，使用scp命令往服务器传压缩包:scp realworld.zip root@113.31.154.5:/root/realworld-nuxtjs

   • 解压

     • 回到服务器的realworld-nuxtjs文件夹里，此时已经有了一个realworld-.zip文件，执行unzip realworld-.zip对压缩包解压
     • 然后使用ls -a查看解压后的所有文件

   • 安装依赖 npm i

   • 启动服务

     • 执行npm run start
     • 访问113.31.154.5:3000

使用PM2在后台启动应用

• Github仓库地址
• 官方文档
• 在生产环境上安装：npm install --global pm2
• 启动pm2 start npm -- start
  PM2常用命令

命令	说明
pm2 list	查看应用列表
pm2 start	启动应用
pm2 stop	停止应用
pm2 reload	重载应用
pm2 restart	重启应用
pm2 delete	删除应用

自动部署

现代化部署方式（CI/CD）

使用GitHub Actions 实现自动部署

• 环境准备
  • linux服务器
  • 把代码提交到GitHub远程仓库

    echo "# realworld-nuxtjs" >> README.md
    git init
    echo node_modules > .gitignore
    git add .
    git commit -m "first commit"
    git remote add origin git@github.com:balabala123/realworld.git
    git push -u origin master
    
    

• 配置GitHub Access Token
  • 头像 -> Settings -> Developer settings -> Personal access tokens -> Generate new Token
  • Token名称填写Tocken，Select scopes勾选repo，然后滚动到网页最下面点击提交按钮。生成了Token
  • 回到羡慕地址下Settings -> Secrets -> New Secrets
• 配置GitHub Actions执行脚本
  • 在项目根目录创建.github/workflows目录
  • 下载main.yml到workflows目录中
  • wget后面的下载地址改为自己的仓库地址
  • 在项目里配置HOST、USERNAME、PASSWORD、PORT（注：post默认是22）、
• 提交更新、
  • git add .
  • git commit -m“第一次发布部署-测试”
  • git tag v0.1.0（通过tag打版）
  • git tag（查看版本）
  • git push origin v0.1.0（把本地标签推送到远程仓库，会触发自动构建）

部署时遇到的问题

1. 在部署服务器的时候，服务已经起来了，但通过公网ip访问，显示连接不上

   • 防火墙设置
     

   • 新建防火墙规则组
     

   • 通过复制新建规则组
     
     
     

   • 编辑新防火墙规则组
     

   • 添加具体新规则
     
     

   • 服务器设置新规则组、
     
     
     

   • 服务器内部防火墙设置

     # 下面指令可无脑依次执行
     
     # 1.查看防火墙状态
     systemctl status firewalld.service
     
     # 2.开启防火墙
     systemctl start  firewalld.service
     
     # 3.开放3306端口
     firewall-cmd  --zone=public  --add-port=3306/tcp  --permanent
     
     # 4.重启防火墙使新设置生效
     firewall-cmd  --reload
     
     # 5.查看已经打开放的端口
     firewall-cmd  --list-ports
     
     作者：景水
     链接：https://juejin.cn/post/6904234342575407111
     来源：掘金
     著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
     

如果只是练习，可以直接把内部防火墙关掉

systemctl stop  firewalld.service   # 关闭内部防火墙

2. 在服务器中运行npm run start是可以访问了，但是用pm2启动之后还是访问不了、
   命令行的方式有些问题. 用配置文件的方式启动运行

3. 自动化构建时，遇到的报错

   • 获取 node、npm、pm2 的运行路径

     whereis node
     whereis npm 
     whereis pm2
     

   • 根据返回结果，创建软连接（类似于windows中的快捷方式）

     sudo ln -s /root/.npm-global/bin/pm2  /usr/bin/pm2
     sudo ln -s /usr/local/node/bin/npm  /usr/bin/npm
     sudo ln -s /usr/local/node/bin/node /usr/bin/node
     

4. 【node错误】/usr/bin/env: node: No such file or directory
   执行npm run xxx的命令的时候，报错，提示如下：/usr/bin/env: node: No such file or directory

   ln -s /usr/bin/nodejs /usr/bin/node
   

   ln -s /usr/local/NODEJS_HOME/bin/node /usr/bin/node
   	```
   

最后，附上两篇帮助很大的文档 解决自动化构建时报错的文档 解決防火墻的