前端部署项目

一、本地打包项目

npm run build

二、登录服务器把打包好的项目放在对应目录

切换到服务器的home目录下，并新建文件夹simeple-website-frontend：`

cd /home
mkdir simple-website-frontend

这里推荐用WinSCP将本地的dist文件放入服务器对应目录中

三、服务器端nginx的安装、配置、启动

1.安装

在服务器端执行：

sudo su root
apt-get install nginx  //  linux有的是用yum下载，不同linux系统下载源不同

查看nginx是否安装成功:

nginx -v  //如果没有发现命令，可能没有添加环境变量

2.修改nginx配置文件

nginx安装成功后的位置如下:

/usr/sbin/nginx：主程序 
/etc/nginx：配置文件所在路径 
/usr/share/nginx：静态文件所在路径 
/var/log/nginx：日志文件所在路径

修改配置文件/etc/nginx/nginx.conf的部分内容，在http中增加server如下：

http {
    server {
        listen       8080;
        server_name  localhost;

        location / {
            root   /home/simple-website-frontend/dist;
            index  /index.html;
        }

 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

注意：以上的端口8080需要在服务器上进行安全组配置，确保服务器能通此接口。

3. nginx服务启动

nginx -t // 检验配置是否正确
nginx -s reload // 重新加载修改的配置
service nginx restart // 重新启动   如果报错就是没添加到系统服务 https://blog.csdn.net/weixin_44256848/article/details/102913687 

最后：，访问http://xxx.xxx.xxx.xxx:8080/就可以成功啦