记录一次前端部署

1. 为所有用户安装 NVM

以下步骤需切换到 root 用户

参考文章：https://www.soulfree.cn/?p=486

设置 github 代理；

相关文章：https://www.cnblogs.com/thepoy/p/14848080.html

1	git config --global url."https://ghproxy.com/https://github.com".insteadOf "https://github.com"

修改 nvm 安装地址，在/etc/profile最后添加如下内容；

1
2
3

export NVM_BIN="/usr/local/nvm/versions/node" # node安装地址
export NVM_DIR="/usr/local/nvm" # nvm安装地址
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

配置立即生效；
1
source /etc/profile

安装 nvm；

1	wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh \| bash

1	curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh \| bash

新开一个窗口验证安装；
1
nvm -v

2. 安装 node

查询可用 node；
1
nvm ls-remote
问题：无可用板本 N/A

解决：https://bitnut.github.io/post/nvm-error/
安装 node；
1
nvm install v10.14.2
切换 node。
1
nvm use v10.14.2

3. 安装 nginx

添加 nginx 仓库；

cat >/etc/yum.repos.d/nginx.repo<<'EOF'
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/\$releasever/\$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
EOF

cat >{文件名}<<’EOF’：创建文件，之后的内容都是文件内容，以 EOF 结束输入。

查看仓库是否生效；
1
yum repolist
yum 安装 nginx；
1
sudo yum install -y nginx
如果无法安装，可以先更换 yum 源为网易163 源，然后执行以下语句
1
2
>yum clean all
>yum makecache
查看 nginx 路径；
1
whereis nginx

启动 nginx；

1	sudo nginx

报错：
1
>nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
解决：

查看占用 80 端口的 PID；
1
>sudo netstat -tunlp | grep 80
结束进程；
1
>kill -9 {PID}

查看是否启动；
1
sudo ps -ef | grep nginx
访问 80 端口；
1
curl 127.0.0.1:80
如果显示Welcome to nginx或者Welcome to CentOS代表启动成功。
查看 nginx 错误日志；
1
cat /var/log/nginx/error.log

其他常用命令；

nginx -s stop # 立即停止
nginx -s reload # 重新加载配置文件
systemctl start nginx
systemctl stop nginx
systemctl status nginx
systemctl reload nginx
systemctl enable nginx # 开机自启动

配置相关；
- /etc/nginx/conf.d：配置文件存放目录；
- /etc/nginx/nginx.conf：配置文件；
- /etc/nginx/nginx.conf.default：默认配置文件。

4. 后台管理前端打包与部署

前提：一个正常解析的域名（已备案），如果不想备案，可购买国外服务器。

后台管理前端基于 vue 2.0 的 vue admin template

修改/config/prod.env.js，配置生产环境变量；

主要是修改 BASE_URL 为 Spring Gateway 网关地址，并且服务器需要放行相应端口

打包 vue admin template 项目，生成「dist」文件夹；

1	npm run build

报错：
1
>ERROR in Template execution failed: ReferenceError: BASE_URL is not defined
解决：

将index.html 中的BASE_URL换为htmlWebpackPlugin.options.url

如：
1
><link rel="icon" href="<%= BASE_URL %>favicon.ico"> 
换为：
1
><link rel="icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico"> 

将打包后的 dist 文件改为项目名，并上传至服务器/home/web/目录下；

修改/etc/nginx/nginx.conf，内容如下；

http{
     #...
+    client_max_body_size        1024m; # 最大文件上传大小
+    fastcgi_connect_timeout     600;
+    fastcgi_send_timeout        600;
+    fastcgi_read_timeout        600;
+    proxy_connect_timeout       600;
+    proxy_send_timeout          600;
+    proxy_read_timeout          600;
+    send_timeout                600;
     #...
     server {
        listen       80;
        listen       [::]:80;
        server_name  admin.nanostu.top; # 域名、主机名

        location /{
            root /home/web/admin; # 打包后的目录
            index index.html index.htm;
        }
        //...
     }
}

重新加载 nginx 配置文件，并访问页面测试；
1
systemctl reload nginx

5. 用户访问前端打包与部署

参考文章：https://blog.csdn.net/piconjo/article/details/106347853

用户访问前端基于 nuxt2 框架

修改 axios 请求的路径；

/utils/request.js
1
baseURL: "http://{服务器 IP}:8222"
在package.json中添加如下内容，修改 nuxt 项目的 IP 地址和端口号；
1
2
3
4
5
6
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3000"
}
}
这儿的 host 改为 0.0.0.0，否则外网无法访问，除非使用 nginx 进行反向代理，至于为什么配置为localhost 不能访问可以阅读这篇文章：彻底明白ip地址，区分localhost、127.0.0.1和0.0.0.0
执行npm run build，在.nuxt文件夹下生成 dist 文件；
1
npm run build
将下图中的文件上传到服务器；

我上传到了/home/web/front目录
进入上传的目录，执行npm install安装依赖；
1
2
cd /home/web/front
npm install
在该目录执行以下命令启动项目并访问测试；
1
npm start
这样启动后，关闭终端就不能访问页面了，下面配置 pm2 后台启动
全局安装 pm2；
1
npm install pm2 -g
设置 pm2 开机自启；
1
2
pm2 startup
pm2 save

进入项目目录，执行以下命令启动前端项目；

1	pm2 start npm --name "project name" -- run start # 项目名在 package.json 中

常用 pm2 命令；

pm2 start [id/name/all]
pm2 stop [id/name/all]
pm2 restart [id/name/all]
pm2 reload [id/name/all]
pm2 delete [id/name/all]

配置 nginx 反向代理；

在/etc/nginx/conf.d文件夹下新建front.conf文件，内容如下

server {
    listen       80;
    listen       [::]:80;
    server_name  front.nanostu.top; # 域名、主机名

    location /{
        proxy_redirect off;
	    proxy_set_header host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 1m;
        proxy_connect_timeout 1m;
        proxy_pass http://127.0.0.1:3000; # nuxt项目的监听端口
    }
}

重新加载配置文件并访问测试；
1
systemctl reload nginx
- 问题一：登录功能不能正常使用
  
  原因：cookie 的 domain 填写的是 localhost
  
  解决：修改项目中的 cookie 作用域
- 问题二：
  
  部署上服务器报如下错误
  1
  Failed to execute 'appendChild' on 'Node': This node type does not support this method
  相关文章：https://segmentfault.com/q/1010000016466439
  
  解决：渲染的页面添加<no-ssr>标签包裹
  1
  2
  3
  4
  5
  <template>
  <no-ssr>
  
  </no-ssr>
  <template>

6. nginx 代理后端接口隐藏 API 端口

新增一个 nginx 配置文件，内容如下；

/etc/nginx/conf.d/api.conf

server {
    listen       80;
    listen       [::]:80;
    server_name  api.nanostu.top; # 域名、主机名

    location /{
        proxy_redirect off;
	    proxy_set_header host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 4m;
        proxy_connect_timeout 4m;
        proxy_pass http://127.0.0.1:8222; # 后端 API 端口（gateway 端口）
    }
}

重新加载配置文件；
1
systemctl reload nginx
将项目中所有请求后端的地址改为上面的地址（api.nanostu.top）；

7. 多个子域名批量申请 SSL 证书并自动续签

参考教程：

https://zhuanlan.zhihu.com/p/354241539

https://github.com/ywdblog/certbot-letencrypt-wildcardcertificates-alydns-au

以下步骤在 root 用户下执行

安装 certbot；

1	yum install certbot python2-certbot-nginx -y

批量申请 SSL 证书；
1
certbot --nginx
按照提示，留空表示为所有检测到的子域名添加证书
自动续约；
1
certbot renew --dry-run
TODO：申请泛域名证书；

因为申请泛域名 SSL 证书还需要手动配置每个 *.conf 文件，所以就暂时搁置了