需求

工作中我们时常需要完成个性化任务,有些甚至涉及从零搭建客户需要的一套代码项目。以移动端+vue+nginx为例,如何将本地代码部署到客户现场?

操作步骤

一、开放端口

sudo firewall-cmd --zone=public --add-port=4161/tcp --permanent

很多人会忽视这一步。在我的工作场景中,可能客户现场的实施人员已经自行完成nginx部署,却发现始终无法访问。其实是因为服务器防火墙并未开放端口。(如上,以4161为例)

sudo firewall-cmd --reload

执行命令后们需要重新加载,保险起见可通过list查看是否开启此端口。

二、在nginx配置文件中配置端口

同样以4161为例,键入以下server块:

server {
		listen  4161;
		root   /opt/example/h5/dist;
        location / {
            try_files $uri $uri/ /index.html;          
        }
        location /h5 {
            alias  /opt/example/h5/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;            
        }
        location /api {
            proxy_pass http://172.xx.xx.xx:8080/;
			proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
        }
    }

网上有很多大佬分享了nginx相关知识,这里就简单描述一下:

1)server块

nginx配置文件的位置通常在 /nginx/conf 或是/etc/nginx 下,main块相当于全局配置、server块相当于单独为每个端口进行指定配置。

listen  4161; // 监听端口
2)区分root和alias
location /h5 {
	root /absolute;
}

location /h5 {
	alias /relative;
}

root和alias的区别在于:
· alias指定的路径就是真实静态资源的路径;
· root指定的路径是在以location块名称为文件夹下的路径;

访问 http://172.xx.xx.xx:4161/h5/absolute
= 访问 http://172.xx.xx.xx:4161/relative
3)区分server块的root和location块的root

server块里的root相当于直接访问,如 http://172.xx.xx.xx:4161/
location块里的root相当于是添加了二级路径访问,如 http://172.xx.xx.xx:4161/h5/

访问 http://172.xx.xx.xx:4161/ 
= 访问 http://172.xx.xx.xx:4161/h5/

直接访问
添加二级路径访问

4)proxy_pass处理跨域

如何在当前ip下访问其他域名?这个时候就用到proxy_pass进行代理,你可以理解为以/api的名义去请求另一个域名。

location /api {
        proxy_pass http://172.xx.xx.xx:8080/;
		proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
    }

三、根据配置文件往路径下丢包

root   /opt/example/h5/dist;

在服务器的/opt/下创建新的文件夹/example,再创建项目文件夹/h5。
将代码项目build后的dist丢在里面。

总结

至此,就能通过http://172.xx.xx.xx:4161/h5访问项目资源页面。
这是一个最简单最基础的部署过程,也是我第一次在现场环境下独立完成部署的个性化项目。

如有更好的方式或是认为理解有偏差,欢迎指点!

Logo

前往低代码交流专区

更多推荐