docker创建nginx前端部署

最新推荐文章于 2024-08-19 18:08:18 发布
最新推荐文章于 2024-08-19 18:08:18 发布
阅读量178 收藏
点赞数
分类专栏： docker 前端部署 文章标签： docker 前端 nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daixiaohong/article/details/119005583
版权

1、将nginx配置文件挂载出来：-v 宿主机目录:/etc/nginx
2、将项目dist目录和容器挂载：-v 宿主机项目目录:/usr/share/nginx/html在这里插入图片描述
我这儿的项目目录为：E:\data\gidea\proc\project\web
3、修改nginx配置文件
在这里插入图片描述

daixiaohong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
docker部署nginx,挂载多个前端部署目录以及跨域问题解决方案.txt
05-28
为了节约成本，很多时候一台server 的nginx可能要部署多个前端的情况，本实例是在docker环境下部署两个前端，同时处理前端调用后端跨域问题，本示例为阿里云centos7 系统docker20.10.6环境下nginx1.19.5版本 本示例分为三个部分，每一步都有解释和完整的命令操作，供参考 第一部分：部署第1个前端nginxdev环境 第二部分：部署第2个前端nginxtest环境 第三部分：处理前端调用java后端跨域问题
docker+nginx部署前端的dist
GliangJu的博客
06-23 2803
docker+nginx部署前端的dist 1、编写Dockerfile： # 设置基础镜像 FROM nginx:alpine # 将dist文件中的内容复制到 /app/dist 这个目录下面 COPY dist/ /app/dist #用本地的 default.conf 配置来替换nginx镜像里的默认配置 COPY default.conf /etc/nginx/conf.d/default.conf 2、编写nginx配置文件default.conf: upstream backendapi
docker使用nginx镜像部署的vue的dist问题
qq_34168515的博客
07-19 1594
文章目录一、前提1.1 结构二、运行nginx三、修改镜像中的 nginx.conf 一、前提 docker的基础可以自己查找资料 用最基本的nginx镜像 docker pull docker.io/nginx 1.1 结构 使用nginx进行动态代理dist文件，该案例使用的端口为9000，并且把dist挂载到宿主机子上 二、运行nginx docker run -itd -p 9000:9000 --privileged=true --name=cz-buy-chat -v /usr/share/c
docker 部署nginx 静态文件挂载踩坑
daiyuenlong110的博客
01-22 2729
先上一条命令： docker run -di -p 80:80 --name=nginx-pro -v /data/nginx/www:/usr/share/nginx/html -v /data/nginx/img:/home/doc/uploads -v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v/data/nginx/logs:/var/log/nginx nginx 在之前的配置中，conf文件挂载成功，静态页面挂载成功，log日
Docker部署Nginx&&发布前端dist包
z_xiaoluan的博客
11-15 1776
docker部署nginx
docker安装nginx部署前端项目
qq_44082755的博客
04-29 1320
​ Nginx挂载的优点是可以方便地进行网站配置和管理。通过对不同目录进行挂载，可以针对不同的网站进行定制化的配置。同时，Nginx挂载也可以提高服务器的安全性，减少攻击的风险，因为攻击者无法直接访问服务器的根目录。​ Nginx挂载是指将某个文件夹或目录作为Nginx服务器的根目录进行访问,用于存放默认页面、日志、配置文件.打包成功后复制文件到你挂载的/home/nginx/html的文件夹中。然后进入/home/nginx/conf配置下 Nginx 配置。将容器内的文件复制到宿主机。
Docker 安装 Nginx 部署前端项目
Turing_tomcat的博客
12-19 1584
如果我们在第一次启动的时候就挂载目录，那么因为我们宿主机是空文件，会直接导致 Nginx 容器内的配置文件被覆盖，致使启动失败。本小章节只是针对与项目有关联配置文件进行一番简单的讲解，更详细的可能就需要大家去找找其他创作者所写的文章啦。保留为容器终端的输入形式，所以结合起来就是进入容器终端并且的保留为容器终端的输入形式(-it和bash的结合作用):这里有一个需要注意的点，Nginx 一般是根据配置文件启动的。退出容器的终端，直接在终端里输入 exit 即可。配置文件，记得重启一下，不然不生效。
快速上手！使用Docker和Nginx部署Web服务的完美指南
热门推荐
qq_35716689的博客
01-27 27万+
本文将为您提供一个完整的指南，教您如何使用Docker和Nginx来部署和管理Web服务，包括域名和SSL证书的配置。
docker部署nginx,挂载多个前端部署目录以及跨域问题解决方案(1).zip
09-16
docker部署nginx,挂载多个前端部署目录以及跨域问题解决方案(1).zip
docker nginx 部署多个项目的示例方法
09-30
主要介绍了docker nginx 部署多个项目的示例方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用docker部署nginx前后端解决跨域问题.docx
03-05
使用docker部署nginx前后端解决跨域问题
docker部署nginx
01-07
文章目录1、拉取官方镜像2、创建宿主机配置文件相关3、启动nginx4、测试5、杂谈 1、拉取官方镜像 1、拉取官方镜像 docker pull nginx 2、创建宿主机配置文件相关 mkdir docker mkdir nginx mkdir conf conf.d ...
Linux安装最新版Docker完整教程
最新发布
weixin_58286934的博客
08-19 585
linux安装docker：docker仓库是用来保存镜像的地方。镜像构建完成后，可以直接在当前宿主机上运行，但是如果需要在其它服务器上使用这个镜像，就需要一个集中存储、分发镜像的服务，docker仓库就是这样的一个服务。
【Docker】宿主机上装个ES和使用docker装个ES有啥不一样
qq_36634055的博客
08-19 346
直接在宿主机上安装Elasticsearch与在Docker容器中启动Elasticsearch的主要区别在于资源管理、隔离性、升级维护和配置数据持久化等方面。资源管理直接在宿主机上安装Elasticsearch会直接使用宿主机的资源。在Docker容器中启动Elasticsearch则通过容器进行资源管理，提供更好的隔离性。隔离性直接安装可能会与其他应用程序共享资源。Docker容器提供了更好的隔离性。升级维护直接安装通常需要手动操作。Docker容器可以更轻松地进行升级和维护。
docker swarm如何让两个副本分别跑在两台不同的主机上
卷王工作室
08-16 370
在 Docker Swarm中，要让服务(service)的两个副本(replica)分别运行在不同的主机上，你需要做的是在部署服务时，使用 --constraint 标志来指定资源限制，例如主机的标签(labels)等都是可以的。例如，如果你有两台主机，一台标签为 host=node1，另一台标签为 host=node2，你可以这样部署服务。这样，每个副本都会被调度到一个符合指定标签的节点上。如果你有多于两台主机，并且每个副本都需要在不同的主机上运行，你可能需要为每个副本指定不同的标签约束。
【docker】Dockerfile
翡翠泪滴的博客
08-19 115
Dockerfile是用于构建Docker镜像的文本文件，其中包含一组用于定义镜像构建过程的指令。
【ubuntu24.04】docker pull 配置
突围
08-16 97
ubuntu24.04
Dockerfile常用指令详解
小诸葛的博客
08-18 329
Dockerfile 是一个用于定义 Docker 镜像构建过程的脚本文件，其中包含了一系列指令，用于指定如何构建和配置镜像。
docker部署nginx前端
07-27
回答: 在使用Docker部署Nginx前端时，有几种常见的方法。其中一种方法是使用以下命令启动一个Nginx容器并挂载本地卷： ``` docker run --name nginx_dev -p 8080:80 -d -v /home/html/dist:/usr/share/nginx/html nginx ``` 这个命令会启动一个名为nginx_dev的容器，将本地的`/home/html/dist`目录挂载到容器内的`/usr/share/nginx/html`目录，从而将前端文件加载到Nginx容器中。 另一种方法是先启动一个Nginx容器，然后将配置文件和前端文件拷贝到容器内。具体步骤如下： 1. 启动Nginx容器： ``` docker run --name nginx_dev -p 8080:80 -d nginx ``` 2. 准备Nginx的配置文件（nginx.conf），并将其拷贝到容器内部： ``` 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; location / { root /home/dist; # 将此处的路径修改为你的项目路径 index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } } ``` 3. 使用以下命令将配置文件拷贝到容器内部： ``` docker cp nginx.conf \[容器id\]:/etc/nginx/ ``` 4. 将前端打包好的文件夹拷贝到容器内指定的目录： ``` docker cp dist \[容器id\]:/home ``` 5. 重新加载Nginx容器： ``` docker exec \[容器名称|容器ID\] nginx -s reload ``` 完成以上步骤后，你可以通过访问`http://localhost:8080`来测试你的前端应用。 #### 引用[.reference_title] - *1* *2* [docker nginx部署前端项目](https://blog.csdn.net/datouniao1/article/details/106442387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [使用docker的nginx部署前端](https://blog.csdn.net/weixin_51311218/article/details/122331980)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值