centos+nginx+git部署vue项目

1. 实现要求

1. 将代码通过git上传到centos服务器
2. 在进行npm run build进行打包
3. 通过nginx配置端口实现访问

2. 环境

1. centos 7.4
2. nodejs v13.11.0

3. 准备

1. centos git下载 yum install -y git

2. centos nginx下载 https://blog.csdn.net/weixin_42109012/article/details/95194776

3. 桌面端命令行我用的是cmd直接访问
   

4. centos的默认安装软件目录在： /etc/nginx

5. centos的默认网站站点存放目录在： /usr/share/nginx/html

6. 上传文件用的是 Xfp5

4. 项目拉取

我的项目是放在服务器的 /home/data/h5upload

在这个目录下执行

1. git clone 项目地址
2. npm install //依赖安装
3. npm run build //打包

执行后

5. nginx配置

在nginx安装目录下 /etc/nginx（我的是默认路径）的nginx.conf文件加入一个server，代码如下

1. 其中 listen为监听的端口号 部署后访问 ip:port即可访问页面

server {
	#监听端口号为8003的端口 8003改成你想要的
    listen       8003 default_server;
    listen       [::]:8003 default_server;
    server_name  _;
    #项目路径 也就是项目打包后的dist路径
	set $root /home/data/h5upload/H5plusUpload/dist;
    root $root; 
    index index.html index.php;
    server_name example.ilxqx.com;
    charset utf-8;
 }

改好后记得执行 nginx - s reload

6. 结果

访问成功！

7. 小结

1. 你可以将你的后台接口也部署在这个nginx下 这样就实现了跨域请求
2. thinkphp 部署代码到服务器也需要nginx代理到适合的目录去在进行访问