Docker-Nginx 容器部署前端Vue项目

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: Docker nginx 容器运行命令,命令参数--name 容器名称 -d 容器后台运行 -p 映射端口,默认80 为前端项目首页,8088端口预留 -v 映射目录,把系统 /etc/nginx/nginx.conf 目录文件映射到容器中的/etc/nginx/nginx.conf 位置, /root 为前端代码上一级目录 --rm 容器停止后删除

055d4b837395235bf2d9c93ee62a0c4a.png


Docker nginx 容器运行命令


docker run --name nginx-server -d -p 80:80 -p 8088:8088 -v /etc/nginx/nginx.conf:/etc/nginx/nginx.conf -v /root:/root --rm nginx


命令参数


--name 容器名称 -d 容器后台运行 -p 映射端口,默认80 为前端项目首页,8088端口预留 -v 映射目录,把系统 /etc/nginx/nginx.conf 目录文件映射到容器中的/etc/nginx/nginx.conf 位置, /root 为前端代码上一级目录 --rm 容器停止后删除


nginx 配置


Docker nginx 容器中的 nginx.conf 配置映射的系统本地 /etc/nginx/nginx.conf 文件


nginx.conf 内容

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
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;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /root/code/project_frontend/dist;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}


/root/code/project_frontend/dist 地址为前端Vue项目打包目录

服务器 nginx 默认ip地址 http://10.255.xxx.xxx/ , 默认前端项目页面


问题记录


如果出现访问 http://10.255.xxx.xxx/ 地址页面 403 的情况,一般是由于目录权限问题导致,使用 chmod -R 777 修改对应的目录权限即可 eg. chmod -R 777 /root


HTTP 403

403错误是一种在网站访问过程中,常见的错误提示,表示资源不可用。服务器理解客户的请求,但拒绝处理它,通常由于服务器上文件或目录的权限设置导致的WEB访问错误。




相关文章
|
3天前
|
测试技术 数据安全/隐私保护 Docker
Docker部署开源项目Django-CMS企业内容管理系统
【5月更文挑战第20天】Docker部署开源项目Django-CMS企业内容管理系统
13 1
|
3天前
|
Java 关系型数据库 Docker
docker打包部署spring boot应用(mysql+jar+Nginx)
docker打包部署spring boot应用(mysql+jar+Nginx)
|
4天前
|
监控 Cloud Native 持续交付
云原生之使用Docker部署Magma导航页
【5月更文挑战第19天】云原生之使用Docker部署Magma导航页
21 0
|
4天前
|
Java Maven Docker
Docker化Spring Boot3应用:从镜像构建到部署
本文介绍了如何在Linux上通过命令行构建和运行Spring Boot 3服务的Docker镜像。首先,基于Ubuntu创建包含JDK 21的基础镜像,然后使用Maven打包Spring Boot应用。接着,构建服务镜像,将应用和依赖添加到镜像中,并设置工作目录和暴露端口。最后,利用docker-compose部署服务,挂载宿主机目录以方便更新静态文件。Docker简化了应用部署,确保了不同环境的一致性。
43 2
Docker化Spring Boot3应用:从镜像构建到部署
|
5天前
|
Cloud Native 搜索推荐 测试技术
云原生之使用Docker部署homarr个人导航页
【5月更文挑战第18天】云原生之使用Docker部署homarr个人导航页
30 1
|
6天前
|
Cloud Native 测试技术 数据库
【云原生之Docker实战】使用Docker部署flatnotes笔记工具
【5月更文挑战第17天】使用Docker部署flatnotes笔记工具
41 8
|
7天前
|
JSON 测试技术 定位技术
【好用的个人工具】在Docker环境下部署Simple mind map思维导图工具
【5月更文挑战第16天】在Docker环境下部署Simple mind map思维导图工具
26 1
【好用的个人工具】在Docker环境下部署Simple mind map思维导图工具
|
应用服务中间件 nginx 容器
|
11天前
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
67 0
|
11天前
|
JavaScript 前端开发 应用服务中间件
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
27 0