使用nginx把打包好的网页文件部署在本地的端口里面

背景

一个vue项目，产品对项目进行功能测试，需要让产品可以通过web浏览器访问这个项目的服务。公司没有完善的工作流流程，因为几个项目的node版本不同，对老项目（node版本低）开一个服务，就没法运行需要node高版本的服务了，很苦恼。于是就想到把文件部署到本地的一个特定端口，这样产品就可以在局域网下访问这个项目了。

操作系统：macOs。

可以在一个目录里面配置nginx的conf配置文件，配置完成后，通过软连接把conf文件配置为nginx的配置。

编辑conf配置文件

可以复制下面一段配置，并且修改如下内容：

macOS使用brow安装的nginx的mime相关的文件保存的位置可以不用改，其他的操作系统自己百度找到mime.types文件所在位置。
服务静态资源中，root的路径就选择项目打包成果的路径；其余的类似。
可以自己修改监听端口，是server块下的listen属性。 ```conf
nginx.conf

events { worker_connections 1024; }

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

server {
    listen 80; # 监听80端口
    server_name 127.0.0.1; # 你的域名或IP地址

    # 服务静态资源
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        root /Users/mac/code/work-compony/object/dist/;
        access_log off; # 可以关闭访问日志，因为静态文件的访问非常频繁
        expires 30d; # 设置缓存时间为30天
    }

    # 服务静态网页
    location / {
        root /Users/mac/code/work-compony/object/dist/;
        index index.html; # 默认页面
        try_files $uri $uri/ @backend;
    }

    # 代理特定路径到后端服务，enterprises后面又/，就表示请求目标服务的url中不添加/web-entreprises前缀
    location /web-entreprises/ {
        proxy_pass http://192.168.10.58:8003; # 后端服务器地址 
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 代理其他请求到后端服务
    location @backend {
        proxy_pass http://192.168.10.58:8003;  
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
} } ```

既然你已经有了nginx的配置文件，并且它位于/Users/mac/code/work-company/plugins/nginx-conf/nginx.conf，你可以按照以下步骤来配置nginx并启动服务：

步骤1：确保nginx已安装

首先，确保你已经安装了nginx。如果还没有安装，可以通过Homebrew安装：

brew install nginx

步骤2：配置nginx

你需要确保nginx使用的是正确的配置文件。默认情况下，nginx的配置文件路径是/usr/local/etc/nginx/nginx.conf。你可以通过创建一个符号链接来让nginx使用你的自定义配置文件：

sudo ln -sf /Users/mac/code/work-company/plugins/nginx-conf/nginx.conf /usr/local/etc/nginx/nginx.conf

这个命令会创建一个符号链接，将/usr/local/etc/nginx/nginx.conf链接到你的自定义配置文件。

步骤3：检查配置文件

在启动nginx之前，检查配置文件是否有语法错误：

sudo nginx -t

如果配置文件没有问题，你会看到如下输出：

nginx: configuration file /usr/local/etc/nginx/nginx.conf test is successful

记得加

events {
    worker_connections 1024;
}

步骤4：启动nginx服务

如果配置检查无误，启动nginx服务：

sudo nginx

或者，如果你想要在后台运行nginx，可以使用：

sudo nginx -s daemon

步骤5：访问nginx

现在，你可以通过浏览器访问http://localhost:5500（或者配置文件中指定的其他端口）来检查nginx是否正常工作。

步骤6：设置开机自启（可选）

如果你希望nginx在系统启动时自动启动，可以将其设置为开机自启动服务：

sudo brew services start nginx

这将创建一个LaunchDaemon，使得nginx在系统启动时自动启动。

通过这些步骤，你应该能够成功配置并启动nginx，使用你的自定义配置文件。如果遇到任何问题，请检查配置文件的语法和路径是否正确。

要停止nginx服务并移除之前创建的链接，你可以按照以下步骤操作：

停止nginx服务

快速停止nginx服务：你可以使用以下命令快速停止nginx服务：
```
1
sudo nginx -s stop
```
这个命令会立即停止nginx主进程以及所有子进程。
优雅地停止nginx服务：如果你希望nginx在处理完当前请求后再停止，可以使用以下命令：
```
1
sudo nginx -s quit
```
这个命令会让nginx在完成当前正在处理的请求后退出。

移除链接

移除软链接：如果你之前使用ln -s命令创建了一个软链接，你可以使用rm命令来移除它：
```
1
sudo rm /etc/nginx/sites-enabled/default
```
这个命令会删除sites-enabled目录下的链接。

重启nginx服务（如果需要）

如果你在修改配置后需要重新启动nginx服务，可以使用以下命令：

sudo nginx