【运维】手把手教你在Linux/Windows系统使用Nginx部署多个前端项目【详细操作】

        需求:项目上线需要将前端的前台和后台部署在服务器上提供用户进行使用，部署在不同的服务器直接在服务器安装nginx即可。但是在内网安装还是有点麻烦，因为需要联网，如果是内网可以参考Linux安装Nginx并部署前端项目【内/外网-保姆级教程】_MXin5的博客-CSDN博客   。 同一个服务器的话就需要在配置文件中下文章了，所以就跟着下列的操作进行在Linux/Windows环境使用Nginx部署两个前端项目吧。

        下列我是用自己的电脑windows系统进行演示哈，主要就是配置文件，也不难，Linux改改配置文件即可，不会LInux部署直接可以看上面的参考链接，很快就上手。

windows部署

        1.先将自己需要部署的前端项目打包成dist包（Linux环境需要打包成tar包进行解压，上面链接有教程）

        2.将dist包直接放在Windows中nginx安装目录下的html下。

        3.修改conf目录下的配置文件nginx.conf

        3.1配置文件nginx.conf（一个server模块代表该 HTTP 服务器配置了一个虚拟主机（Vritual Host）。），下列我写了两个server模块（两个虚拟主机），一个监听端口为3000.一个端口为3001，分别代表前台和后台的监听端口号，注意修改里面的root中的dist的存放路径监听端口号和location这三个地方。

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

	#定义一个新的 server 块，表示该 HTTP 服务器配置了一个虚拟主机（Vritual Host）。
	 server {   
		#add
		client_max_body_size 10m;
		#监听端口 80，这是 HTTP 服务器的默认端口。
        listen       3000;
		#指定该虚拟主机的域名是 localhost。在实际生产环境中，您需要输入实际域名。
        server_name  frontend;
		#输入localhost：3000直接访问前端的index首页		
        location / {
            add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
			add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
			# 禁止OPTIONS
				return 204;
			}
            root ./html/frontend; #前端dist文件存储的位置D:/xxx/nginx-1.22.0/html/dist   ./html/dist(必须是dist的相对路径)
            index  index.html index.htm; 
			try_files $uri $uri/ /index.html;	
        }
		
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    	#定义一个新的 server 块，表示该 HTTP 服务器配置了一个虚拟主机（Vritual Host）。
	 server {   
		client_max_body_size 10m;
        listen       3001;
        server_name  backend;
        location / {
            add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
			add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
			# 禁止OPTIONS
				return 204;
			}
            root ./html/backend; 
            index  index.html index.htm; 
			try_files $uri $uri/ /index.html;	
        }
      
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }   
    }
    include servers/*;
}

        4.启动nginx进行测试

        5进行测试localhost:3000和localhost:3001。

部署过程可能遇到的问题

        按照上面的方式进行部署两个前端项目，并且启动nginx过后发现两个项目都启动成功了。但是进行访问的时候总是显示连接失败或者连接超时，这时候再次使用curl ip地址:端口号（例如：localhost:3000）进行访问,如果能够访问到说明部署没有问题，而是防火墙的问题。那么对防火墙进行关闭即可，下面就是如何进行关闭防火墙的过程。

1windows查看是否启动成功

2Linux查看是否成功

输入netstat -tpln命令进行查看

3.查看防火墙是否开启

        在 Linux 操作系统中，可以使用以下命令来查看当前是否开启了防火墙：

sudo systemctl status firewalld

        如果输出结果中显示active (running)，则表示防火墙是开启的；如果显示inactive (dead)，则表示防火墙是关闭的。

        如果防火墙没有开启，可以使用以下命令来启动防火墙:

sudo systemctl start firewalld

        如果防火墙已经开启，可以使用以下命令来关闭防火墙：

sudo systemctl stop firewalld

        如果希望在系统启动的时候自动启动防火墙，可以使用以下命令：

sudo systemctl enable firewalld

        如果希望禁用防火墙自启动，可以使用以下命令：

sudo systemctl disable firewalld

4.通过上面的关闭防火墙的命令就可以关闭防火墙，这样你之前访问不到的项目现在就可以进行访问了。