需求: express+vue项目用nginx做代理
1.安装启动nginx
// 安装 Nginx:
yum -y install nginx
// 查看 Nginx 版本
nginx -v
// 查看 Nginx 安装目录
rpm -ql nginx
// 启动 Nginx
service nginx start
2.上传代码到 /var/www 文件夹下面
此时文件下面有server(后台) manager(前台管理端) 两个文件夹,这块前端代码部分我一开始是写成admin的,因为我后台接口部分分了两部分,为了给admin和web端区分开,但是在nginx部分配置前端的时候,两块不能同时使用admin,为啥,我后面会提到的,反正这个地方不能一致就对了
3.启动后台
npm run start
执行的是nodemon启动程序,有时候后台可能是之前启动着的,那么如果我们有需求要结束当前进程那么,我们就应该先结束nodemon才行
先查询nodemon的进程号
然后结束该进程
kill -9 进程号
再查询运行的端口
结束占用该端口的进程
kill -9 进程号
4.配置nginx代理服务
找到nginx配置文件 /etc/nginx/nginx.conf, 开始编辑
server {
listen 80;
# listen [::]:80 default_server;
server_name 119.45.154.6;
# root /usr/share/nginx/html;
# root /var/www;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
# 前端配置
location / {
root /var/www;
index index.html index.htm;
}
#后端代理配置
location /admin {
proxy_pass http://119.45.154.6:3000;
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
要做的配置就是找到上边server的这段,以内前后分离所以,location也分为两个部分,
前端配置
location / {
root /var/www;
index index.html index.htm;
}
root 找的是前端代码的根目录, /var/www ,这个文件夹下面我要放两部分前端代码,一个最为管理端(manager),一个是纯客户端(app), 这两个部分调用的后台接口分别对应 admin 和 web ,
起初,我想的是前端不叫manager和app,而是和后台admin和web保持一致,
但是,就这个loucation配置,因为第一个location 配置的是/ 根路径,而后台的location配置的/admin,这个不能改的,因为要调用接口,
因为 “/admin” 先匹配上,而 “/” 是自己去找文件夹下面的东西做匹配,显然,“/admin”的优先级就更高了,当前端在遇到“/admin”的时候就会替代后端的配置,这显然不是我们想要的,所以在前端这块我们一定不能和后台接口分类起相同的名字.
完结!