前端(vue)部署步骤超详细(Linux nginx部署vue)

安装nginx

1.配置nginx的安装环境
yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

2.将nginx安装包(压缩包),移动到/usr/local/下。

3.解压
tar -zxvf nginx-1.19.4.tar.gz

4.cd nginx-1.19.4

5.配置
./configure --prefix=/usr/local/nginx

6. make

7. make install

8. 进入sbin文件中
cd /usr/loca/nginx/sbin

9. 启动
./nginx

10.测试
./sbin/nginx -t

正常输出:
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

11.访问IP,有欢迎页。

12.如果没有欢迎页,可能是防火墙没有打开80端口

 -1- 查看防火墙已开放端口 firewall-cmd --list-ports
 -2- 开放80端口 firewall-cmd --zone=public --add-port=80/tcp --permanent
 -3- 重启防火墙 systemctl reload firewalld

开始部署

1.修改【两个】配置文件的ip(换成服务器ip)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.打包vue,终端执行yarn run build或者npm run build

3.在目录下生成了一个名字为【dist】的文件夹

4.将文件夹复制到/usr/local/nginx/html下面

5.修改nginx的配置文件(配置文件路径:/usr/local/nginx/conf 下的nginx.conf)

在这里插入图片描述

6.重启nginx(或者关闭再启动)。

7.关闭指令:ps -ef | grep nginx  (查找到运行端口)

8.Kill -9 运行端口

9.然后重启

10.访问ip

版权声明:本文为qq_43815329原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。