Nginx周末部署
创始人
2024-11-18 14:06:34
0

背景

Nginx是本人学习的一类中间件,上次完成了vue的搭建,所以顺便把项目加入Nginx吧

1. 镜像拉取与测试

查询dockerHub,选择最新最稳定的版本
docker pull nginx:stable-perl

执行下载
docker run -d --name mynginx -p 8080:80 -v D:\IMAGE\nginx:/etc/nginx nginx:stable-perl
尝试运行,成功在这里插入图片描述

2. 静态配置部署

前端通过npm run insatll完成下载,然后将Nginx的root指向编译出来的dist文件

还需要更新一下docker指令,docker run --name mynginx -p 80:80 -v D:\IMAGE\nginx\etc:/etc/nginx -v D:\IMAGE\nginx\var:/var/www/print nginx:stable-perl,这样就把配置和静态文件分开挂载了

配置如下

server {     listen       80;     listen  [::]:80;     server_name  localhost;     root /var/www/print/dist;      location / { 	try_files $uri $uri/ /index.html;     } } 

bug 前端拒绝访问

问题在于vue不识别除了localhost以外所有访问源,甚至包括127.0.0.1
解决方案:vue.config.js的defineConfig对象直接加上

  server: {     host: '0.0.0.0', // 绑定到所有网络接口     port: 5173,     // 确保端口号与应用程序一致   }, 

3.动态配置

完成了前端的配置,还需要将前端对后端的访问改为对Nginx的访问,从而完成Nginx的动静配置

axios.post("http://" + global_ip + "/search", ...
改为
axios.post("/api/search", ...
直接localhost访问,并且添加统一路径让Nginx完成识别转发

Nginx添加配置

    location /api/ {         proxy_pass http://192.168.96.200:8080/;  # 后端 API 服务的地址         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;     } 

bug 405

这个响应码是方法不被后端识别,往往是url配置问题
检查一下nginx,修改配置信息

    location /api/ {         proxy_pass http://192.168.96.200:8080/;  # 由于这里一开始忘了加上“/”,导致405         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;     } 

4. 动态负载

动态配置最大的特点就在于它的负载均衡,所以还是需要配置一下

# 由这里指定负载均衡地址 upstream backend {      server 192.168.96.200:8080;      server 192.168.96.210:8080; }  server {     listen       80;     listen  [::]:80;     server_name  localhost;     root /var/www/print/dist;      location /api/ {         proxy_pass http://backend/;  # 将ip地址抽象成upstream         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;     }     ... 

tip1:前端部署方法

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash source ~/.bashrc nvm install 20.16.0 nvm use 20.16.0 

tip2:配置查找

默认路径为/etc/nginx/
里面有一个文件nginx.conf是主文件
主要分为了两种类型,一种是stream,一种是http
除此之外,可以通过include将http和stream的更多配置放到其它文件

http {
include /etc/nginx/conf.d/*.conf;
}

Nginx有两种日志,一种是每次都会记载的访问日志,一种是错误记载的错误日志,我们可以从配置中找到它们

相关内容

热门资讯

2024新版教程!wpk辅助透... 2024新版教程!wpk辅助透视(德扑数据软件)其实真的有挂(详细透明挂教程)1、德扑数据软件系统规...
AI辅助!德扑之星刷数据(透视... AI辅助!德扑之星刷数据(透视)外挂透明挂辅助器安装(有挂存在)-哔哩哔哩1、让任何用户在无需AI插...
教你攻略!德州ai辅助器(德扑... 教你攻略!德州ai辅助器(德扑ai助手)其实真的是有挂(详细透视辅助教程)教你攻略!德州ai辅助器(...
教你攻略辅助!德扑数据分析软件... 教你攻略辅助!德扑数据分析软件(透明)外挂透明挂辅助app(有挂工具)-哔哩哔哩1、德扑数据分析软件...
wpk教程!wpk微扑克有辅助... wpk教程!wpk微扑克有辅助吗(wepoke模拟器)原来确实真的有挂(详细透视辅助教程)1、这是跨...
2024新版总结辅助!德州辅助... 2024新版总结辅助!德州辅助软件线上(透视)外挂透明挂辅助插件(真的有挂)-哔哩哔哩1、下载好德州...
透明挂教程!wepoke软件收... 透明挂教程!wepoke软件收费是真的吗(德州之星辅助)原来真的是有挂(详细辅助挂教程)1)wepo...
2024新版技巧辅助!wepo... 2024新版技巧辅助!wepoke游戏数据有说法吗(透视)外挂透明挂辅助器安装(有挂详情)-哔哩哔哩...
技巧教程!pokerworld... 技巧教程!pokerworld下载(WPK透视辅助)原来真的有挂(详细透明挂教程);1分钟了解详细教...
德州论坛辅助!wpk外挂被实锤... 德州论坛辅助!wpk外挂被实锤(透明)外挂透明挂辅助app(有挂分析)-哔哩哔哩是一款可以让一直输的...