Nginx使用同一个域名部署多个前端Angular项目

前言：

现在基本上都是前后端分离的部署方式，前端可能项目很多，需要在同一个域名或ip部署多个前端项目的需求。

环境描述：

Centos7
nginx 1.19.6
部署的项目 angular

使用docker 进行部署nginx的

Docker部署nginx

1、准备工作

第一步 创建配置文件目录
mkdir -p /usr/local/nginx/conf

第二步 执行运行nginx
docker run --name nginx-test -d nginx:latest

第三步 拷贝文件
#把容器中的nginx.conf文件复制到conf目录下
docker cp nginx-test:/etc/nginx/nginx.conf /usr/local/nginx/conf  
#把容器中的default.conf文件复制到conf目录下
docker cp nginx-test:/etc/nginx/conf.d/default.conf /usr/local/nginx/conf  

第四步 删除nginx-test容器
docker rm -f nginx-test

第五步 真正的运行自己的nginx部署项目
docker run -it -d --name mynginx -p 8081:80 -v /usr/local/nginx/html:/etc/nginx/html -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/nginx/conf/default.conf:/etc/nginx/conf.d/default.conf  -v /usr/local/nginx/logs:/var/log/nginx --restart=always nginx

宿机上/usr/local/nginx，如下

2、修改nginx配置

注意：windows中nginx只对nginx.conf进行配置即可 liunx分开两个配置一个是default.conf和nginx.conf，这两个可以合并一个方便管理

修改nginx.conf 如下：

#user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

   server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        #第一个项目
        location /{
            root     html/test1;
            index  index.html;
            try_files $uri $uri/ /index.html; #注意此句，一定要加上。否则配置的子路由等无法使
        }

       #第二个项目
       location /test2{
            alias     html/test2;
            index  index.html;
            try_files $uri $uri/ /test2/index.html; #注意此句，一定要加上。否则配置的子路由等无法使
        }

       #第三个项目
       location /test3{
            alias     html/test3;
            index  index.html;
            try_files $uri $uri/ /test3/index.html; #注意此句，一定要加上。否则配置的子路由等无法使
        }

	location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|json|svg|ttf|woff)$ {
           access_log off;
           expires 7d;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    #include /etc/nginx/conf.d/*.conf;
}

这块配置多个项目时，使用别名，除了第一个项目使用root，其它几个项目都是用alias来进行配置的。

3、拷贝项目

拷贝项目到/usr/local/nginx/html下即可，不需要重启nginx，直接访问。