This article describes the method of deployment, servers are suitable for any system (eg: windows, mac, etc ...), but also can deploy any front-end framework of the project (eg: vue, react, jq, etc ...)
1. Open the nginx installation directory, where to mac system as an example:
Var folder there is a folder at the same level in the etc directory, var www folder inside a folder. This www folder is placed in the front end of the project to be deployed in place. Similarly, other server systems also find the / var / www path, the front end of the project to be deployed into the can.
1.1 www folder inside the index.html and 50x.html is nginx own. index.html welcome page is nginx, nginx is generally used to determine whether a successful start. 50x.html page is an error page.
1.2 song and dist folder into my own just two front-end projects, song folder Here's a test.html page, dist folder after vue project is a package.
2. Start the configuration file /etc/nginx/nginx.conf
2.1 Configuration /song/test.html
2.2 Configuration /dist/index.html. This configuration is dist subdirectory under the 9996 port visit, remember to modify vue project inside assetsPublicPath and the router base for the dist.
Note: If the server is the mac system, front-end project deployed if not put under the nginx / var / www / directory, for example, put on the table, may be error when accessed, if nginx configuration is ok, then an error log it could be no authority, as follows:
2020/02/12 11:36:42 [error] 37614#0: *13 "/Users/admin/Desktop/test/test.html" is forbidden (13: Permission denied), client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", host: "localhost:9998"
这时就可能是安装的 homebrew 有问题，解决方案就是：(二选一即可)
a. 重新安装 homebrew
b. 修改mac系统的权限配置(自行google)
我个人的建议就是，被部署的项目直接放到 /var/www/ 目录下即可。因为这个目录就是nginx本身的，不会有任何权限问题，而且这种方法适用于任何系统和任何项目。