服务器上部署前端Vue项目代码

本人自己感觉部署前端代码比部署后端难，主要是我在部署的过程中遇到了各种报错😭，写这篇文章主要是记录一下自己艰难的踩坑过程，最终部署成功～～～

前端框架使用的是Vue3
服务器系统是CentOS7

部署的整个过程主要分为一下几步：

1. 打包vue项目
2. 在服务器上配置相关的环境和安装nginx
3. 上传前端打包好的项目到服务器
4. 修改nginx配置文件

准备好了就开始吧！！！

1. 打包vue项目

在终端运行 npm run build，出现如下结果就是打包完成了

然后在找到dist文件夹，点击index.html，以浏览器的方式运行

但是以浏览器方式打开后，打开控制台，可以看到报了 404 的错。这是因为部署后publicPath默认设为了'/'，我们需要在vue.config.js文件中手动修改为publicPath: './'

// vue.config.js
module.exports = {
  // ...... 其他配置
  publicPath: './'
}

然后再一次运行 npm run build，用浏览器打开index.html，问题解决

2. 在服务器上配置相关的环境和安装nginx

此处主要涉及到几个库的安装，我是参考这篇文章来的【Nginx安装】CentOS7安装Nginx及配置

2.1 安装gcc gcc-c++

yum install -y gcc gcc-c++

2.2 安装PCRE库

cd /usr/local/
wget http://jaist.dl.sourceforge.net/project/pcre/pcre/8.33/pcre-8.33.tar.gz
tar -zxvf pcre-8.33.tar.gz
cd pcre-8.33
./configure
make && make install

2.3 安装SSL库

此处需要注意openssl和nginx版本的问题，我使用的openssl-1.1.1d和nginx-1.17.9适配，大家可以做一个参考。

cd /usr/local/
wget http://www.openssl.org/source/openssl-1.1.1d.tar.gz
tar -zxvf openssl-1.1.1d.tar.gz
cd openssl-1.1.1d
./config
make && make install

若在wget http://www.openssl.org/source/openssl-1.1.1d.tar.gz这一步出现了“颁发的证书已过期”的提示，那么可以输入命令：

wget http://www.openssl.org/source/openssl-1.1.1d.tar.gz --no-check-certificate

在安装其他库时遇到这个问题可以使用同样的方法

2.4 安装zlib库

cd /usr/local/
wget https://zlib.net/zlib-1.2.12.tar.gz
tar -zxvf zlib-1.2.12.tar.gz
cd zlib-1.2.12
./configure
make && make install

2.5 安装nginx

cd /usr/local/
wget http://nginx.org/download/nginx-1.17.9.tar.gz
tar -zxvf nginx-1.17.9.tar.gz
cd nginx-1.17.9 
./configure --user=nobody --group=nobody --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_gzip_static_module --with-http_realip_module --with-http_sub_module --with-http_ssl_module
make && make install

# 我在./configure这一步一直找不到openssl，需要指定一下其源码路径
# ./configure --prefix=/usr/local/nginx --with-openssl=/usr/local/openssl-1.0.1j

2.6 启动nginx

/usr/local/nginx/sbin/nginx

在浏览器上使用服务器IP访问（nginx的默认端口是80），若出现 Welcome to nginx! 则表示 Nginx 已经安装并运行成功。

要是在启动失败，提示说80端口被占用，可以查看是哪个进程占用的80端口，然后kill掉。

# 查看是那个进程占用了80端口
netstat -nlp|grep 80

# 杀死对应的进程
kill -9 1522

然后重新启动nginx，即可在浏览器上访问（输入服务器的IP）

补充一点有关nginx的操作

# 以上安装步骤下来，nginx的配置文件位于
/usr/local/nginx/conf/nginx.conf

# 重启nginx
cd /usr/local/nginx/sbin
./nginx –s reload

# 停止nginx
cd /usr/local/nginx/sbin
./nginx –s stop

# 测试配置文件是否正常
cd /usr/local/nginx/sbin
./nginx -t

# 强制关闭nginx
pkill nginx

3. 上传前端打包好的项目到服务器

我使用的连接服务器软件是Royal TSX，具体配置文件传输的方法可以查看我的上一篇博客Royal TSX文件传输File Transfer

使用Windows系统的家人们可以使用xshell和xftp配置文件传输

配置完成后，将dist文件传输到服务器上自定义的路径下，我的路径是/data/project/monaco-editor，此处强烈建议不要把dist文件放在root路径下，因为我们要对文件进行操作，这样不好改权限

将文件传输完成后，chmod修改文件的权限为755

chmod 755 /data/project/monaco-editor

4. 修改nginx配置文件

终于距离胜利越来越近啦！
按照上述步骤安装nginx，它的配置文件路径为/usr/local/nginx/conf/nginx.conf，我们需要修改其中的一些配置，都集中在修改server了

vim /usr/local/nginx/conf/nginx.conf

修改完成后，主要要重启nginx才可以生效

# 重启nginx
cd /usr/local/nginx/sbin
./nginx –s reload

然后在浏览器中输入服务器IP地址和配置好的前端端口，即可访问。部署完成！

5. 踩坑

然后在浏览器中输入服务器IP地址和配置好的前端端口进行访问，发现了 403 报错，排查问题可以看看这个博客centos7部署nginx与vue搭配及403排错，我是其中的第一种情况，输入ps aux | grep "nginx: worker process" | awk '{print $1}'，发现不是同一用户，一个是root，应该是nobody，然后我修改nginx配置文件，重新启动nginx后，浏览器不再报错。

还有一个坑，我是将后端代码和前端代码都部署在同一个服务器上，我以为可以不需要配置nginx进行代理，但其实是需要的，主要修改一下几处：

• nginx的配置文件

vim /usr/local/nginx/conf/nginx.conf
# 在server中添加proxy_pass
server {
	# ......其他配置
	location ^~/backend-api/ {
		# 请求后端接口的地址和端口
    	proxy_pass http://60.205.210.90:8088/;
	}
}

• vue项目中的vue.config.js文件
  
  此处圈出来的名字要和nginx的配置文件对应
  
  配置完成后，在浏览器上前端请求接口不再报错 404