使用nginx前后台项目打包发布

淩亂°似流年 2023-03-12 09:23 45阅读 0赞

#### 使用nginx前后台项目打包发布： ####

>     进入前端项目：cd client 
>     打包文件：npm run build
> 
> 打包完成，生成dist目录（复制dist目录下的所有文件）
> 
> ##### 下载nginx #####
> 
>     http://nginx.org/en/download.html
> 
> 然后在nginx下载的目录中，运行：`.\nginx.exe`
> 
> 在浏览器测试：`http://localhost:80`，提示：Welcome to nginx!
> 
> 然后在nginx下载目录下，新建www目录 / 新建movie-info文件夹（dist目录中的内容，粘贴到这里）
> 
> ##### 百度搜索栏：nginxconfig.io #####
> 
> 进入网页：选择：Reverse proxy选项，点击enabled
> 
> 填写信息：
> 
>     /api
> 
>     http://127.0.0.1:3000
> 
> 往下找，系统会自动生成代码：如下
> 
> ###### reverse proxy ######
> 
>     location /api {
>     	proxy_pass http://127.0.0.1:3000;
>     	include nginxconfig.io/proxy.conf;
>     }
> 
>     注意：将上文的这段代码：include nginxconfig.io/proxy.conf;
>     替换为下面的这些代码。往下找：proxy.conf，代码自动生成
>     
>     proxy_http_version	1.1;
>     proxy_cache_bypass	$http_upgrade;
>     
>     proxy_set_header Upgrade			http_upgrade;
>     proxy_set_header Connection 		"upgrade";
>     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;
>     proxy_set_header X-Forwarded-Host	host;
>     proxy_set_header X-Forwarded-Port	$server_port;
> 
> 将上面的代码粘贴到这里：找到下载的nginx，找到nginx.config，打开文件：新增server信息
> 
> （注意监听端口有可能被占有）
> 
> ##### host文件路径：C:\\Windows\\System32\\drivers\\etc #####
> 
> ###### 修改host文件：127.0.0.1 wdmovie123.com ######
> 
> 测试域名：在下载的nginx目录下：ping wdmovie123.com -t
> 
>     server {
>             listen       8080;
>             server_name  wdmovie123.com www.wdmovie123.com;
>     
>             location / {
>                 root   www/movie-info;
>                 index  index.html index.htm;
>             }
>     		location /api/ {
>     			proxy_pass http://127.0.0.1:3000/;
>     			proxy_http_version	1.1;
>     			proxy_cache_bypass	$http_upgrade;
>     
>     			proxy_set_header Upgrade			$http_upgrade;
>     			proxy_set_header Connection 		"upgrade";
>     			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;
>     			proxy_set_header X-Forwarded-Host	$host;
>     			proxy_set_header X-Forwarded-Port	$server_port;
>     		}
>         }
> 
> 然后在浏览器：movie-info.com，就可以访问前端页面了，完美！！！