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

使用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，就可以访问前端页面了，完美！！！