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天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为"/h5/party/pc/",在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题
|
4天前
|
存储 安全 数据安全/隐私保护
【Docker 专栏】Docker 容器化应用的备份与恢复策略
【5月更文挑战第9天】本文探讨了Docker容器化应用的备份与恢复策略,强调了备份在数据保护、业务连续性和合规要求中的关键作用。内容涵盖备份的重要性、内容及方法,推荐了Docker自带工具和第三方工具如Portainer、Velero。制定了备份策略,包括频率、存储位置和保留期限,并详细阐述了恢复流程及注意事项。文章还提及案例分析和未来发展趋势,强调了随着技术发展,备份与恢复策略将持续演进,以应对数字化时代的挑战。
【Docker 专栏】Docker 容器化应用的备份与恢复策略
|
4天前
|
监控 Kubernetes Docker
【Docker 专栏】Docker 容器内应用的健康检查与自动恢复
【5月更文挑战第9天】本文探讨了Docker容器中应用的健康检查与自动恢复,强调其对应用稳定性和系统性能的重要性。健康检查包括进程、端口和应用特定检查,而自动恢复则涉及重启容器和重新部署。Docker原生及第三方工具(如Kubernetes)提供了相关功能。配置检查需考虑检查频率、应用特性和监控告警。案例分析展示了实际操作,未来发展趋势将趋向更智能和高效的检查恢复机制。
【Docker 专栏】Docker 容器内应用的健康检查与自动恢复
|
1天前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端的技术探索
【5月更文挑战第12天】Vue.js是渐进式前端框架,以其简洁和强大的特性深受开发者喜爱。它聚焦视图层,采用MVVM模式实现数据与视图的双向绑定,简化开发。核心特性包括响应式数据绑定、组件化、模板系统和虚拟DOM。通过创建Vue实例、编写模板及定义方法,可以构建交互式前端,如计数器应用。Vue.js让复杂、交互式的前端开发变得更加高效和易维护。
|
1天前
|
存储 安全 开发者
如何删除 Docker 镜像、容器和卷?
【5月更文挑战第11天】
12 2
如何删除 Docker 镜像、容器和卷?
|
2天前
|
jenkins 网络安全 持续交付
新的centos7.9安装docker版本的jenkins2.436.1最新版本-后端项目发布(四)
新的centos7.9安装docker版本的jenkins2.436.1最新版本-后端项目发布(四)
|
2天前
|
Java 开发工具 git
新的centos7.9安装docker版本的jenkins2.436.1最新版本-项目发布(三)
新的centos7.9安装docker版本的jenkins2.436.1最新版本-项目发布(三)
10 4
|
3天前
|
NoSQL Redis Docker
Mac上轻松几步搞定Docker与Redis安装:从下载安装到容器运行实测全程指南
Mac上轻松几步搞定Docker与Redis安装:从下载安装到容器运行实测全程指南
14 0
|
4天前
|
缓存 关系型数据库 数据库
【Docker 专栏】Docker 与容器化数据库的集成与优化
【5月更文挑战第9天】本文探讨了Docker与容器化数据库集成的优势,如快速部署、环境一致性、资源隔离和可扩展性,并列举了常见容器化数据库(如MySQL、PostgreSQL和MongoDB)。讨论了集成方法、注意事项、优化策略,包括资源调整、缓存优化和监控告警。此外,强调了数据备份、恢复测试及性能评估的重要性。未来,随着技术发展,二者的集成将更紧密,为数据管理带来更多可能性。掌握此技术将应对数字化时代的机遇与挑战。
【Docker 专栏】Docker 与容器化数据库的集成与优化
|
4天前
|
存储 安全 数据库
【Docker 专栏】Docker 容器内应用的状态持久化
【5月更文挑战第9天】本文探讨了Docker容器中应用状态持久化的重要性,包括数据保护、应用可用性和历史记录保存。主要持久化方法有数据卷、绑定挂载和外部存储服务。数据卷是推荐手段,可通过`docker volume create`命令创建并挂载。绑定挂载需注意权限和路径一致性。利用外部存储如数据库和云服务可应对复杂需求。最佳实践包括规划存储策略、定期备份和测试验证。随着技术发展,未来将有更智能的持久化解决方案。
【Docker 专栏】Docker 容器内应用的状态持久化