服务器部署 前端篇

上篇整完了服务器的后端部署，本篇搞一搞前端的部署

1. 环境准备

想要服务器访问自己的前端，有几种方案，如 用服务端代理、Nginx反向代理

这里采取主流的Nginx方案

1.1 服务器安装Nginx

sudo yum install nginx

1.2 启动Nginx服务并设置开机自启动

sudo systemctl start nginx
sudo systemctl enable nginx

到这一步，可以直接通过公网ip直接访问，如果顺利的话，应该会出现nginx的welcome页面~

2. 打包、上传

把打包好的前端文件夹上传到上一篇创建好的目录下 /home/project/Client

需要确保打包完的前端目录，是能在本地正常访问的

tips：可以build完成后，cd进入到dist文件夹中，命令行执行 start 即可开启默认的3000 端口访问验证（start 命令需要安装一下包）

3. 修改nginx.conf配置

这一步，需要在nginx进行配置，把代理的静态文件目录指向自己的前端所在位置，然后重启nginx服务

cd /etc/nginx

进入到nginx的默认安装目录（如果没有改过的话）

会发现有这些文件

修改nginx.conf文件，可以直接在原有默认的基础上加上 server、location

server {
    listen 80;

    location / {
        root /home/project/Client;  # 之前上传文件的路径
        try_files $uri $uri/ /index.html;
	index index.html;
    }
}

注意server这一块写在 http {} 里面 完整内容大概为：

保存，重启nginx服务

sudo systemctl reload nginx

再次通过公网ip看看能不能访问到自己的前端

4. 失败原因排查

如果不行，看到的还是nginx的welcome页面

那说明改动不生效（确保正确重启了nginx服务的前提下）

那么还有一种可能，那就是受到了/etc/nginx/conf.d/default.conf 这个配置文件的影响

Nginx 会加载 /etc/nginx/conf.d/ 目录下所有以 .conf 结尾的文件。如果 default.conf 中包含与你的主配置文件冲突或重复的设置，它可能会覆盖或干扰主配置文件中的设置。

4.1 查看 /etc/nginx/conf.d/default.conf 文件

果然 默认加载了这个文件，指向还是nginx的默认welcome页面

4.2 处理 /etc/nginx/conf.d/default.conf 文件

最简单的处理方法是，把 default.conf 文件重命名即可

注意：这里有个小坑， 需要把.conf 后缀修改，而不是在前面加，不然还是会加载这个文件的

重新启动nginx服务

sudo systemctl reload nginx

5. 访问前端

再次通过公网ip直接访问

可以正常访问啦