使用Docker安装的Nginx代理前端vue项目
本篇文章主要是记录 一次使用 docker成功部署nginx之后,代理(部署)静态资源或前端vue项目,遇到的2个问题(docker安装nginx参考)
1.前置条件,防火墙关闭,开放80端口,docker、nginx一切正常。
挂载关联关系:
宿主机目录与nginx容器内目录对应
/home/nginx/html --> /usr/share/nginx/html
2.前端项目或静态资源,放在宿主机的 /home/nginx/html/目录下
以下问题以test为例
有一个test文件夹,里面有一个 index.html页面。
于是资源路径:/home/nginx/html/test/index.html
第一个问题:访问代理路径,报500,日志如下
[error] 23#23: *2 rewrite or internal redirection cycle while internally redirecting to "/test/index.html", client: 192.168.5.1**, server: localhost, request: "GET /test HTTP/1.1", host: "192.168.0.1**"
解决办法
错误的nginx配置:
root /usr/share/nginx/html; --> 容器内路径
(alias当前配置的是宿主机的路径:alias /home/nginx/html/test;)
server {listen 80;listen [::]:80;server_name localhost;#access_log /var/log/nginx/host.access.log main;location / {root /usr/share/nginx/html;index index.html index.htm;}location /test {alias /home/nginx/html/test;index index.html index.htm;try_files $uri $uri/ /test/index.html;}#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}}
正确的配置:alias /usr/share/nginx/html/test;
尽管资源是放到宿主机的目录,但是配置时,还是得配置 容器内的目录
server {listen 80;listen [::]:80;server_name localhost;#access_log /var/log/nginx/host.access.log main;location / {root /usr/share/nginx/html;index index.html index.htm;}location /test {alias /usr/share/nginx/html/test;index index.html index.htm;try_files $uri $uri/ /test/index.html;}#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}}
第二问题:正确访问报403 forbidden问题
解决办法
修改nginx.conf文件,把user nginx; 改为 user root;
user root;
worker_processes auto;error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;events {worker_connections 1024;
}http {include /etc/nginx/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"';access_log /var/log/nginx/access.log main;sendfile on;#tcp_nopush on;keepalive_timeout 65;#gzip on;include /etc/nginx/conf.d/*.conf;
}
修改完成之后,重启nginx,访问正常!
docker restart nginx
使用Docker安装的Nginx代理前端vue项目相关推荐
- nginx 部署前端vue项目dist文件
nginx 部署前端页面 server {listen 8082; server_name localhost;location / {root /usr/local/dist; #前端页面地址ind ...
- 采用docker安装部署Nginx
四.采用docker安装部署Nginx 在主机192.168.1.138下,安装nginx,docker 的安装命令如下: docker run \ -d \ -p 8080:80 \ --name ...
- Docker安装的Nginx无法访问静态资源|nginx 容器静态资源无法访问
最近在docker部署Thinkphp管理后台,部署完成后发现根目录下所有静态资源无法访问.翻了很多php 配置和nginx 配置,后来发现是因为使用Docker 容器问题. 问题描述 Docker启 ...
- Jenkins自动化部署前端Vue项目
Jenkins自动化部署前端Vue项目 前言 安装NodeJs 下载NodeJs 安装NodeJs npm配置 Jenkins配置NodeJs 安装NodeJs插件 配置NodeJs 新建及配置任务 ...
- Windows服务器部署前端vue项目
阿里云Windows服务器部署前端vue项目 准备工作 下载node.js(略)http://nodejs.cn/download/ 下载Nginx http://nginx.org/en/downl ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- nginx下部署vue项目
nginx下部署vue项目 今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来. 首先要去nginx官网下下载nginx: 下载地址:https://ngin ...
- nginx下部署vue项目概览 - (资源篇)
相关博客: nginx下部署vue项目概览 这里使用的是百度云的服务器,CentOS7系统的 linux服务器用centos还是ubuntu系统_Linux nginx服务器搭建以及配置 nginx部 ...
- 在nginx上部署vue项目(history模式)--demo实列;
转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是 ...
最新文章
- 为什么不使用多机训练神经网络
- Pair Testing
- 5个经典的JavaScript面试题
- python编程基础_月隐学python第一课
- 2-jQuery - AJAX load() 方法【进阶篇】
- android 自定义progressbar demo,Android 自定义进度条ColorfulProgressbar,原理简单、效果还行...
- 蓝桥杯 第七届 JAVA B组 凑算式
- EfficientDet目标检测谷歌官方终于开源了!
- 【原】IOS合并lib(.a)库的终极可用方法(可用于解决duplicate symbol静态库冲突)
- 面向对象 —— 类设计(十二)—— 全局变量和成员变量
- 2022 年您必须关注的 8 个python数据科学神器
- Github emoji 表情包大全
- 层次聚类python实现
- 软件供应链安全威胁:从“奥创纪元”到“无限战争”
- 电脑中病毒以后,如何删掉右键残留的菜单
- Java之HashMap系列--保证线程安全的方法
- STM32F103实现OV7725拍照存储为BMP位图
- 金弘同创怎么样:拼多多获取奖励金的办法
- 最近爆火的电子血氧仪是什么原理?测的准吗?
- Charles的基本使用及教程
热门文章
- LA 3266 Tian Ji -- The Horse Racing
- Google Earth Engine(GEE)——利用Landsat 5 每一期影像制作动画时序并附带时间属性
- [软件分享]速盘,一个新的摆渡网盘下载工具
- 缓存方案coolKie、localStorage、sessionStorage介绍和简单的使用
- 解决POI读取Excel百万级内存溢出问题
- Adobe Creative Suite 3 Design Premium 中文版下载
- 电工学简明教程笔记-----第二更 2018 3.11 15:25
- 视频教程-php初级到项目实战-PHP
- NXP(Freescale) QorIQ T2080启动流程分析
- php模板引擎循环start,smarty模板引擎foreach和section循环操作详解