5分钟教你快速配置nginx实现访问

需求

工作中我们时常需要完成个性化任务，有些甚至涉及从零搭建客户需要的一套代码项目。以移动端+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访问项目资源页面。
这是一个最简单最基础的部署过程，也是我第一次在现场环境下独立完成部署的个性化项目。

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