Windows 和 Mac 平台下安装 Nginx 部署前端项目教程
Windows部署Nginx
1、安装Nginx
下载安装包、解压即可完成安装
2、部署前端项目
以上步骤可以不做，资料中已提供部署完成的Nginx压缩包，直接解压双击nginx.exe 即可
2.1、前端打包
（1）进入前端的源代码 package.json 对应的目录下执行命令
运营商后台：restkeeper-vue-operator
npm run build:prod
商家后台：restkeeper-vue-shop
npm run build:prod
点餐平台：restkeeper-vue-uniapp
npm run build
以上命令分别进入对应的文件夹下执行，会得到 dist 文件夹（如果有可以提前删除）
资料中已提供
2.2、部署资源
（1）在解压后的Nginx文件夹下创建文件夹：restkeeper 本机：D:/nginx-1.18.0/restkeeper
（2）将刚刚打包的资源存到restkeeper文件夹下
2.3、配置nginx.conf
#运行用户
#user root;
#启动进程,通常设置成和cpu的数量相等(但是又时候也不光与cpu有关)
worker_processes 1;
#系统在单个进程中打开文件的个数
worker_rlimit_nofile 30000;
#全局错误日志及PID文件
pid logs/nginx.pid;
#工作模式及连接数上限
events {
use epoll; #epoll是多路复用IO(I/O Multiplexing)中的一种方式,但是仅用于linux2.6以上内核,可以大大提高nginx的性能
worker_connections 5000;#单个后台worker process进程的最大并发链接数
#multi_accept on;
}
#设定http服务器，利用它的反向代理功能提供负载均衡支持
http {
include mime.types;
#反向代理配置，可以打开proxy.conf看看
include proxy.conf;
#设定mime类型,类型由mime.type文件定义
#include 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"';
#sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用，
#必须设为 on,如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，以平衡磁盘与网络I/O处理速度，降低系统的uptime.
sendfile on;
#连接超时时间
keepalive_timeout 120;
tcp_nodelay on;
tcp_nopush on;
#开启gzip压缩
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_disable "MSIE [1-6]\.";
gzip_comp_level 3;
gzip_vary on;
#站点:运营平台
upstream operator{
server 127.0.0.1:8011 weight=2 max_fails=2 fail_timeout=30s;
}
#站点:商家平台
upstream shop{
server 127.0.0.1:8017 weight=2 max_fails=2 fail_timeout=30s;
}
#站点:点餐平台
upstream dc{
server 127.0.0.1:8017 weight=2 max_fails=2 fail_timeout=30s;
}
server {
#侦听80端口
listen 80;
#定义使用www.xx.com访问
server_name www.eehp.cn;
#访问日志
access_log logs/operator_project.log main;
#错误日志
error_log logs/operator_error_project.log;
#定义错误提示页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
internal;
}
location / {
root restkeeper/operator;
try_files $uri $uri/ /index.html;
index index.html;
}
location /security {
root /;
proxy_pass http://operator;
}
location /basic {
root /;
proxy_pass http://operator;
}
location /operator {
root /;
proxy_pass http://operator;
}
location /doc {
root /;
proxy_pass http://operator;
}
location /webjars {
root /;
proxy_pass http://operator;
}
location /swagger-resources {
root /;
proxy_pass http://operator;
}
#设定查看Nginx状态的地址
location /NginxStatus {
stub_status on;
access_log on;
auth_basic "NginxStatus";
auth_basic_user_file conf/htpasswd;
}
}
server {
#侦听80端口
listen 80;
#定义使用*.eehp.cn访问
server_name *.shop.eehp.cn ;
#访问日志
access_log logs/shop_access_project.log main;
#错误日志
error_log logs/shop_error_project.log;
#定义错误提示页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
internal;
}
location / {
root restkeeper/shop;
try_files $uri $uri/ /index.html;
index index.html;
}
location /trading {
root /;
proxy_pass http://shop;
}
location /shop {
root /;
proxy_pass http://shop;
}
location /security {
root /;
proxy_pass http://shop;
}
location /basic {
root /;
proxy_pass http://shop;
}
location /operator {
root /;
proxy_pass http://shop;
}
location /doc {
root /;
proxy_pass http://shop;
}
location /webjars {
root /;
proxy_pass http://shop;
}
location /swagger-resources {
root /;
proxy_pass http://shop;
}
#设定查看Nginx状态的地址
location /NginxStatus {
stub_status on;
access_log on;
auth_basic "NginxStatus";
auth_basic_user_file conf/htpasswd;
}
}
server {
#侦听80端口
listen 80;
#定义使用*.eehp.cn访问
server_name *.dc.eehp.cn ;
#访问日志
access_log logs/shop_access_project.log main;
#错误日志
error_log logs/shop_error_project.log;
#定义错误提示页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
internal;
}
location / {
root restkeeper/app;
try_files $uri $uri/ /index.html;
index index.html;
}
location /trading {
root /;
proxy_pass http://dc;
}
location /shop {
root /;
proxy_pass http://dc;
}
location /security {
root /;
proxy_pass http://dc;
}
location /basic {
root /;
proxy_pass http://dc;
}
location /operator {
root /;
proxy_pass http://dc;
}
location /doc {
root /;
proxy_pass http://dc;
}
location /webjars {
root /;
proxy_pass http://dc;
}
location /swagger-resources {
root /;
proxy_pass http://dc;
}
#设定查看Nginx状态的地址
location /NginxStatus {
stub_status on;
access_log on;
auth_basic "NginxStatus";
auth_basic_user_file conf/htpasswd;
}
}
}
2.4、重启Nginx
（1）直接在任务管理器栏，找到 nginx的进程，直接结束任务
（2）双击 nginx.exe 重新启动Nginx
（3)测试结果
- 运营商后台：http://www.eehp.cn/
- 用户名：[email protected]
- 密码：pass
- 商家后台：http://ppsk.shop.eehp.cn/
- 用户名：[email protected]
- 密码：pass
- 点餐平台：http://ppsk.dc.eehp.cn/
Mac部署Nginx
1、安装homebrew
已安装可忽略
（1）将命令粘贴至terminal，然后回车即可
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
（2）检查是否安装成功
# 使用命令检查
brew -v
Homebrew 2.5.11-117-gc376837-dirty
Homebrew/homebrew-core (git revision 9567a7; last commit 2020-11-20)
Homebrew/homebrew-cask (git revision 95e371; last commit 2020-11-20)
2、使用brew安装Nginx
（1）执行命令
brew install nginx
（2）等待安装即可，检查Nginx是否安装成功
nginx -v
#版本
nginx version: nginx/1.19.4
（3）启动Nginx服务，使用命令
nginx
#检查Nginx服务
nianqiang@localhost nginx % ps aux | grep nginx
nianqiang 73857 0.0 0.0 4268448 744 s001 S+ 1:33下午 0:00.00 grep nginx
nianqiang 73803 0.0 0.0 4301168 1080 ?? S 1:33下午 0:00.00 nginx: worker process
nianqiang 73802 0.0 0.0 4291512 576 ?? Ss 1:33下午 0:00.00 nginx: master process nginx
（4）其它命令
nginx -s reload #重新加载配置
nginx -s reopen #重启
nginx -s stop #停止
nginx -s quit #退出
nginx -V #查看版本，以及配置文件地址
nginx -v #查看版本
nginx -c filename #指定配置文件
nginx -h #帮助
如：nginx -V
nianqiang@localhost nginx % nginx -V
nginx version: nginx/1.19.4
built by clang 12.0.5 (clang-1205.0.22.11)
built with OpenSSL 1.1.1h 22 Sep 2020
TLS SNI support enabled
configure arguments: --prefix=/usr/local/Cellar/nginx/1.19.4 --sbin-path=/usr/local/Cellar/nginx/1.19.4/bin/nginx --with-cc-opt='-I/usr/local/opt/pcre/include -I/usr/local/opt/[email protected]/include' --with-ld-opt='-L/usr/local/opt/pcre/lib -L/usr/local/opt/[email protected]/lib'
--conf-path=/usr/local/etc/nginx/nginx.conf
--pid-path=/usr/local/var/run/nginx.pid
--lock-path=/usr/local/var/run/nginx.lock
--http-client-body-temp-path=/usr/local/var/run/nginx/client_body_temp
--http-proxy-temp-path=/usr/local/var/run/nginx/proxy_temp
--http-fastcgi-temp-path=/usr/local/var/run/nginx/fastcgi_temp
--http-uwsgi-temp-path=/usr/local/var/run/nginx/uwsgi_temp
--http-scgi-temp-path=/usr/local/var/run/nginx/scgi_temp
--http-log-path=/usr/local/var/log/nginx/access.log
--error-log-path=/usr/local/var/log/nginx/error.log
--with-compat --with-debug --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_degradation_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-ipv6 --with-mail --with-mail_ssl_module --with-pcre --with-pcre-jit --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module
注意：
- Nginx页面所在的位置：/usr/local/Cellar/nginx/1.19.4
- Nginx配置文件所在位置：/usr/local/etc/nginx
- 日志文件：/usr/local/var/log/nginx/
（5）访问Nginx：http://127.0.0.1:8080/
3、部署前端项目
3.1、前端打包
（1）进入前端的源代码 package.json 对应的目录下执行命令
运营商后台：restkeeper-vue-operator
npm run build:prod
商家后台：restkeeper-vue-shop
npm run build:prod
点餐平台：restkeeper-vue-uniapp
npm run build
以上命令分别进入对应的文件夹下执行，会得到 dist 文件夹（如果有可以提前删除）
资料中已提供
3.2、部署资源
（1）使用 cd 进入当前用户目录
（2）新建文件夹，名称：restkeeper
（3）将打包的前端复制到restkeeper 目录下
（4）最终结果
当前演示Mac电脑是放在：/Users/Ares/Documents/restkeeper 目录下，你可以直接放在你的Mac电脑的目目录下即可（不要有中文和空格）
3.3、配置nginx.conf
#运行用户
#user root;
#启动进程,通常设置成和cpu的数量相等(但是又时候也不光与cpu有关)
worker_processes 1;
#系统在单个进程中打开文件的个数
worker_rlimit_nofile 30000;
#全局错误日志及PID文件
pid logs/nginx.pid;
#工作模式及连接数上限
events {
use epoll; #epoll是多路复用IO(I/O Multiplexing)中的一种方式,但是仅用于linux2.6以上内核,可以大大提高nginx的性能
worker_connections 5000;#单个后台worker process进程的最大并发链接数
#multi_accept on;
}
#设定http服务器，利用它的反向代理功能提供负载均衡支持
http {
include mime.types;
#反向代理配置，可以打开proxy.conf看看
include proxy.conf;
#设定mime类型,类型由mime.type文件定义
#include 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"';
#sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用，
#必须设为 on,如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，以平衡磁盘与网络I/O处理速度，降低系统的uptime.
sendfile on;
#连接超时时间
keepalive_timeout 120;
tcp_nodelay on;
tcp_nopush on;
#开启gzip压缩
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_disable "MSIE [1-6]\.";
gzip_comp_level 3;
gzip_vary on;
#站点:运营平台
upstream operator{
server 127.0.0.1:8011 weight=2 max_fails=2 fail_timeout=30s;
}
#站点:商家平台
upstream shop{
server 127.0.0.1:8017 weight=2 max_fails=2 fail_timeout=30s;
}
#站点:点餐平台
upstream dc{
server 127.0.0.1:8017 weight=2 max_fails=2 fail_timeout=30s;
}
server {
#侦听80端口
listen 80;
#定义使用www.xx.com访问
server_name www.eehp.cn;
#访问日志
access_log logs/operator_project.log main;
#错误日志
error_log logs/operator_error_project.log;
#定义错误提示页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
internal;
}
location / {
####注意： /Users/Ares/Documents/ 修改为自己的Mac路径即可
root /Users/Ares/Documents/restkeeper/operator;
try_files $uri $uri/ /index.html;
index index.html;
}
location /security {
root /;
proxy_pass http://operator;
}
location /basic {
root /;
proxy_pass http://operator;
}
location /operator {
root /;
proxy_pass http://operator;
}
location /doc {
root /;
proxy_pass http://operator;
}
location /webjars {
root /;
proxy_pass http://operator;
}
location /swagger-resources {
root /;
proxy_pass http://operator;
}
#设定查看Nginx状态的地址
location /NginxStatus {
stub_status on;
access_log on;
auth_basic "NginxStatus";
auth_basic_user_file conf/htpasswd;
}
}
server {
#侦听80端口
listen 80;
#定义使用*.eehp.cn访问
server_name *.shop.eehp.cn ;
#访问日志
access_log logs/shop_access_project.log main;
#错误日志
error_log logs/shop_error_project.log;
#定义错误提示页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
internal;
}
location / {
####注意： /Users/Ares/Documents/ 修改为自己的Mac路径即可
root /Users/Ares/Documents/restkeeper/shop;
try_files $uri $uri/ /index.html;
index index.html;
}
location /trading {
root /;
proxy_pass http://shop;
}
location /shop {
root /;
proxy_pass http://shop;
}
location /security {
root /;
proxy_pass http://shop;
}
location /basic {
root /;
proxy_pass http://shop;
}
location /operator {
root /;
proxy_pass http://shop;
}
location /doc {
root /;
proxy_pass http://shop;
}
location /webjars {
root /;
proxy_pass http://shop;
}
location /swagger-resources {
root /;
proxy_pass http://shop;
}
#设定查看Nginx状态的地址
location /NginxStatus {
stub_status on;
access_log on;
auth_basic "NginxStatus";
auth_basic_user_file conf/htpasswd;
}
}
server {
#侦听80端口
listen 80;
#定义使用*.eehp.cn访问
server_name *.dc.eehp.cn ;
#访问日志
access_log logs/shop_access_project.log main;
#错误日志
error_log logs/shop_error_project.log;
#定义错误提示页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
internal;
}
location / {
####注意： /Users/Ares/Documents/ 修改为自己的Mac路径即可
root /Users/Ares/Documents/restkeeper/app;
try_files $uri $uri/ /index.html;
index index.html;
}
location /trading {
root /;
proxy_pass http://dc;
}
location /shop {
root /;
proxy_pass http://dc;
}
location /security {
root /;
proxy_pass http://dc;
}
location /basic {
root /;
proxy_pass http://dc;
}
location /operator {
root /;
proxy_pass http://dc;
}
location /doc {
root /;
proxy_pass http://dc;
}
location /webjars {
root /;
proxy_pass http://dc;
}
location /swagger-resources {
root /;
proxy_pass http://dc;
}
#设定查看Nginx状态的地址
location /NginxStatus {
stub_status on;
access_log on;
auth_basic "NginxStatus";
auth_basic_user_file conf/htpasswd;
}
}
}
3.4、重启Nginx
（1）执行命令 nginx -s relaod 或者执行以下命令，防止Nginx启动失败
#1、查询Nginx进程id
nianqiang@localhost Documents % ps aux | grep nginx
nianqiang 95542 0.0 0.0 4278688 776 s001 S+ 2:14下午 0:00.00 grep nginx
nianqiang 73803 0.0 0.0 4327792 488 ?? S 1:33下午 0:00.00 nginx: worker process
nianqiang 73802 0.0 0.0 4291512 232 ?? Ss 1:33下午 0:00.00 nginx: master process nginx
#2、强制删除 Nginx的进程id
nianqiang@localhost Documents % kill -9 73803 73802
nianqiang@localhost Documents %
nianqiang@localhost Documents %
#3、检查是否删除
nianqiang@localhost Documents % ps aux | grep nginx
nianqiang 96586 0.0 0.0 4287904 792 s001 S+ 2:14下午 0:00.00 grep nginx
（2）重新启动Nginx
nianqiang@localhost Documents % nginx #启动命令，发现出现以下异常
nginx: [emerg] open() "/usr/local/Cellar/nginx/1.19.4/logs/operator_project.log" failed (2: No such file or directory)
#异常原因：没有logs文件夹，解决只需要在/usr/local/Cellar/nginx/1.19.4/目录下创建 logs 文件夹
mkdir /usr/local/Cellar/nginx/1.19.4/logs -p
#在次启动
nianqiang@localhost Documents % nginx
# 检查Nginx进程
nianqiang@localhost Documents % ps aux | grep nginx
nianqiang 99959 0.0 0.0 4268448 744 s001 S+ 2:21下午 0:00.00 grep nginx
nianqiang 98698 0.0 0.0 4313792 436 ?? S 2:18下午 0:00.00 nginx: worker process
nianqiang 98697 0.0 0.0 4312656 300 ?? Ss 2:18下午 0:00.00 nginx: master process nginx
（3）测试结果
- 运营商后台：http://www.eehp.cn/
- 用户名：[email protected]
- 密码：pass
- 商家后台：http://ppsk.shop.eehp.cn/
- 用户名：[email protected]
- 密码：pass
- 点餐平台：http://ppsk.dc.eehp.cn/
