nginx部署vue前端项目,访问报错500 Internal Server Error

前言

描述:当我配置好全部之后,通过 服务器 ip 地址访问,遇到报错信息:500 Internal Server Error

情况说明

前提:我是通过Docker启动nginx容器,通过-v 绑定数据卷,将html文件和nginx.conf通过挂载的方式启动。

我将vue项目打包放在 html路径下。通过启动命令启动nginx容器,命令如下所示:

shell 复制代码
docker run -d --privileged=true --name nginx -v /mydata/nginx/html:/usr/share/nginx/html -v /mydata/nginx/nginx.conf:/etc/nginx/nginx.conf -p 80:80 nginx

一、展示配置

1.1 nginx.conf
shell 复制代码
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
		charset utf-8;

		location / {
            root   /usr/share/nginx/html;
	    	try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		


     	error_page   500 502 503 504  /50x.html;
    	location = /50x.html {
            root   html;
        }
    }
}
1.2 详细解释
shell 复制代码
		location / {
            root   /usr/share/nginx/html;

/usr/share/nginx/html:对应的路径应该是docker内部映射的html所在的文件路径,而不是主机上的html所在路径。

总结

至于为什么会出现标题上面的报错,是因为我把配置文件内的 root 对应的路径写错了。所以在我排查的过程中,一直觉得很奇怪,明明html路径也有,容器启动正常,就是访问不到。花费了一些时间。

  • 知识归纳:
  • 在这个实验中,我意识到nginx.conf这个文件针对的是容器内部才有效,而不是看着容器外面的路径。
相关推荐
Mintopia19 分钟前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙38 分钟前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户433845375691 小时前
Promise深度解析,以及简易版的手写实现
前端
梦之云1 小时前
state 状态相关
前端
梦之云1 小时前
effect 副作用相关
前端
golang学习记1 小时前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia1 小时前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
5pace2 小时前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat
Learn Beyond Limits2 小时前
如何在Mac进行Safari网页长截图?
前端·macos·safari·方法·操作·功能·开发者平台
阿珊和她的猫2 小时前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js