服务器（华为云centos8）部署前端项目

一、上传打包文件

1、利用vscode的remote插件，连接远程服务器

利用vscode打开远程服务器的某个文件夹

2.在打开的远程目录下新建一个文件夹（我个人是在 root 目录下新建了一个 Graduation-FE文件夹）

3.利用 FileZilla 这款软件对远程服务器进行连接，并进入到刚才建立的文件夹（Graduation-FE）下

建立连接

进入目录

4.把打包后的文件夹拖入到该目录下

这就意味着我已经把打包后的文件放到了服务器上的某个位置了

二、配置nginx

1.安装 nginx

yum install nginx

2.通过vscode进入到服务器的 nginx 目录下

3.打开 nginx.conf 文件，并对 nginx 进行相关配置

4.nginx 讲究配置分离，因此我们在 conf.d 文件夹下新建 Graduation-FE.conf 文件，单独对项目进行配置（nginx 会自动对 .cong结尾的文件进行处理）

下面是我的配置（不同项目配置有所不同）

server {
    listen     8899;
    server_name  _;

    location / {
        root /root/Graduation-FE/dist;
        index index.html; 
        try_files $uri $uri/ /index.html;
    }
}

5.因为 nginx 在默认情况下是无法访问我们的文件的，因此，需要把 nginx.conf 文件里的 user nginx 改为 user root

6.更改完了 nginx 配置之后，需要对 nginx 进行重启

nginx -s reload

但是可能出现如下错误：

解决办法：进入 /run 目录下，打开 vscode 的终端，运行如下命令:

nginx -c /etc/nginx/nginx.conf

解决成功，成功重启：

三、最后，打开浏览器，输入服务器地址，再拼接上相关端口即可（相关端口可能需要单独在服务器控制台进行安全组配置）