本篇文章主要是记录 一次使用 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项目相关推荐

  1. nginx 部署前端vue项目dist文件

    nginx 部署前端页面 server {listen 8082; server_name localhost;location / {root /usr/local/dist; #前端页面地址ind ...

  2. 采用docker安装部署Nginx

    四.采用docker安装部署Nginx 在主机192.168.1.138下,安装nginx,docker 的安装命令如下: docker run \ -d \ -p 8080:80 \ --name ...

  3. Docker安装的Nginx无法访问静态资源|nginx 容器静态资源无法访问

    最近在docker部署Thinkphp管理后台,部署完成后发现根目录下所有静态资源无法访问.翻了很多php 配置和nginx 配置,后来发现是因为使用Docker 容器问题. 问题描述 Docker启 ...

  4. Jenkins自动化部署前端Vue项目

    Jenkins自动化部署前端Vue项目 前言 安装NodeJs 下载NodeJs 安装NodeJs npm配置 Jenkins配置NodeJs 安装NodeJs插件 配置NodeJs 新建及配置任务 ...

  5. Windows服务器部署前端vue项目

    阿里云Windows服务器部署前端vue项目 准备工作 下载node.js(略)http://nodejs.cn/download/ 下载Nginx http://nginx.org/en/downl ...

  6. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  7. nginx下部署vue项目

    nginx下部署vue项目 今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来. 首先要去nginx官网下下载nginx:  下载地址:https://ngin ...

  8. nginx下部署vue项目概览 - (资源篇)

    相关博客: nginx下部署vue项目概览 这里使用的是百度云的服务器,CentOS7系统的 linux服务器用centos还是ubuntu系统_Linux nginx服务器搭建以及配置 nginx部 ...

  9. 在nginx上部署vue项目(history模式)--demo实列;

    转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是 ...

最新文章

  1. 为什么不使用多机训练神经网络
  2. Pair Testing
  3. 5个经典的JavaScript面试题
  4. python编程基础_月隐学python第一课
  5. 2-jQuery - AJAX load() 方法【进阶篇】
  6. android 自定义progressbar demo,Android 自定义进度条ColorfulProgressbar,原理简单、效果还行...
  7. 蓝桥杯 第七届 JAVA B组 凑算式
  8. EfficientDet目标检测谷歌官方终于开源了!
  9. 【原】IOS合并lib(.a)库的终极可用方法(可用于解决duplicate symbol静态库冲突)
  10. 面向对象 —— 类设计(十二)—— 全局变量和成员变量
  11. 2022 年您必须关注的 8 个python数据科学神器
  12. Github emoji 表情包大全
  13. 层次聚类python实现
  14. 软件供应链安全威胁:从“奥创纪元”到“无限战争”
  15. 电脑中病毒以后,如何删掉右键残留的菜单
  16. Java之HashMap系列--保证线程安全的方法
  17. STM32F103实现OV7725拍照存储为BMP位图
  18. 金弘同创怎么样:拼多多获取奖励金的办法
  19. 最近爆火的电子血氧仪是什么原理?测的准吗?
  20. Charles的基本使用及教程

热门文章

  1. LA 3266 Tian Ji -- The Horse Racing
  2. Google Earth Engine(GEE)——利用Landsat 5 每一期影像制作动画时序并附带时间属性
  3. [软件分享]速盘,一个新的摆渡网盘下载工具
  4. 缓存方案coolKie、localStorage、sessionStorage介绍和简单的使用
  5. 解决POI读取Excel百万级内存溢出问题
  6. Adobe Creative Suite 3 Design Premium 中文版下载
  7. 电工学简明教程笔记-----第二更 2018 3.11 15:25
  8. 视频教程-php初级到项目实战-PHP
  9. NXP(Freescale) QorIQ T2080启动流程分析
  10. php模板引擎循环start,smarty模板引擎foreach和section循环操作详解