前端项目部署（nginx docker容器）

最新推荐文章于 2025-03-15 22:20:45 发布
最新推荐文章于 2025-03-15 22:20:45 发布
阅读量3.8k 收藏 5
点赞数
分类专栏： 基础 文章标签： 部署 前端项目部署 nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aimashi620/article/details/90233231
版权
本文介绍如何在服务器上配置Nginx反向代理，将前端项目部署并访问。通过详细步骤说明如何设置location，解释了请求路径的匹配与处理过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我现在有一个服务器，域名为http://training.certmaptest.com，使用nginx做反向代理。

1.假设我现在需要把我的前端项目部署到服务器上，并且使用http://training.certmaptest.com/web/#/来访问我的主页。首先我们需要在nginx里配置location
在这里插入图片描述
2.当在浏览器上输入路由http://training.certmaptest.com/web时，根据nginx的location匹配规则会匹配到上图的“/web”，然后把“/web”这个路径添加到root的后面，所以root的值就变成了“/var/www/quality_training/web/”。
在这里插入图片描述
3.然后我们可以查看一下nginx容器的挂载目录，可以发现“/var/www”目录是挂载在宿主机的“/home/docker-compose/nginx/web”目录下的，所以访问“/var/www/quality_training/web/”实际就是访问宿主机的“/home/docker-compose/nginx/web/quality_training/web/”目录
在这里插入图片描述
在这里插入图片描述

nginx部署前端教程
niulinbiao的博客
04-07 3290
一般来说现在的软件项目，都是分用户端以及管理端的，并且是前后端分离的，这里我来记录一下部署两个前端的教程。部署前端之前需要的准备工作是部署springBoot后端程序，这里我来对后端程序进行部署docker compose部署springboot+redis+mysql这里我的后端接口地址为centos安装nginx准备还以上的工具就可以继续往下走了。
Docker利用Nginx部署前端项目
尽我所能，分享开发问题的解决方式
10-27 7437
Dockerfile左侧的dist文件夹就是你前端项目存放的文件夹、nginx.conf.template文件中设置了首页跳转index等，使用时记得改成自己所需的；注：如果是linux系统，先找个位置创建文件夹，然后利用可视化窗口将三个文件全部拉到刚刚创建的文件夹下即可。--p：端口号，左侧为外网访问端口，右侧为内部映射端口，与nginx.conf.template的监听端口默认80一样即可。到此为止，你的项目就成功部署到Docker中的Nginx中了，撒花*★,°*:.☆(￣▽￣)/$:*.°★*。
Docker 安装 Nginx 容器部署前端项目
FLGB
03-19 4089
docker运行nginx镜像时，设置端口映射，则只有该映射端口起作用，nginx配置的其他端口无效。所以想要多个端口起效果，启动时要用–net host （先删除容器后重新生成），并且修改配置文件中的root路径，再次访问成功加载首页。docker下的nginx只能读到挂载路径下面的文件（到对应目录下查看文件已经存在了（划红线的）删除成功后，重新生成容器并进行目录挂载映射。我们拉去1.24.0的nginx镜像。在对应挂在目录下创建监听文件。
使用 Docker 部署前端项目全攻略
最新发布
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
03-15 2009
使用 Docker 部署前端项目全攻略
使用docker的nginx部署前端
雁迟的博客
01-05 1499
构建生产环境(默认) npm run build # 构建测试环境 npm run build --qa # 构建验收环境 npm run build --uat # 构建生产环境 npm run build --prod 方法一： 1、启动docker的nginx容器并挂载本地卷 # -v [本地路径]:[容器路径] docker run --name nginx_dev -p 8080:80 -d -v /home/html/dist:/usr/share/nginx/html nginx 方法
linux centos部署nginx前端代码
wsbgmofo的博客
12-11 3946
1、下载并解压nginx wget http://nginx.org/download/nginx-1.4.7.tar.gz tar -zxvf nginx-1.4.7.tar.gz 2、安装gcc等依赖包 yum -y install gcc pcre-devel openssl openssl-devel 3、开始安装nginx cd进入nginx-1.4.7目录内 ./co
前端Vue项目整合nginx部署到docker容器
梦想的追求
11-27 1138
vue 部署到ngxin容器实践
Docker容器简单部署nginx过程解析
01-09
1、容器中部署nginx服务 centos：7镜像运行一个容器，并且，在这个容器内部署Nginx服务。 [root@Docker ~]# docker pull centos:7 //下载镜像 [root@Docker ~]# docker run -itd –name webapp –restart=always ...
docker部署nginx,挂载多个前端部署目录以及跨域问题解决方案.txt
05-28
为了节约成本，很多时候一台server 的nginx可能要部署多个前端的情况，本实例是在docker环境下部署两个前端，同时处理前端调用后端跨域问题，本示例为阿里云centos7 系统docker20.10.6环境下nginx1.19.5版本 ...
docker 搭建 nginx 部署前端项目
锦年的博客
01-04 1954
本文主要介绍如何使用docker安装nginx，以及如何将前端打包好的vue项目部署到nginx上。–name nginx-test：容器名称（自定义的）-p 8080:80：端口进行映射，将本地 8080 端口映射到容器内部的 80 端口。-d nginx：设置nginx容器在后台一直运行。
前端将项目部署到服务器(Nginx)的完整步骤
故里的博客
04-25 4985
前端将项目部署到服务器(Nginx)的完整步骤
Docker 安装 Nginx 部署前端项目
Turing_tomcat的博客
12-19 1832
如果我们在第一次启动的时候就挂载目录，那么因为我们宿主机是空文件，会直接导致 Nginx 容器内的配置文件被覆盖，致使启动失败。本小章节只是针对与项目有关联配置文件进行一番简单的讲解，更详细的可能就需要大家去找找其他创作者所写的文章啦。保留为容器终端的输入形式，所以结合起来就是进入容器终端并且的保留为容器终端的输入形式(-it和bash的结合作用):这里有一个需要注意的点，Nginx 一般是根据配置文件启动的。退出容器的终端，直接在终端里输入 exit 即可。配置文件，记得重启一下，不然不生效。
docker安装nginx部署前端项目
qq_44082755的博客
04-29 2085
​ Nginx挂载的优点是可以方便地进行网站配置和管理。通过对不同目录进行挂载，可以针对不同的网站进行定制化的配置。同时，Nginx挂载也可以提高服务器的安全性，减少攻击的风险，因为攻击者无法直接访问服务器的根目录。​ Nginx挂载是指将某个文件夹或目录作为Nginx服务器的根目录进行访问,用于存放默认页面、日志、配置文件.打包成功后复制文件到你挂载的/home/nginx/html的文件夹中。然后进入/home/nginx/conf配置下 Nginx 配置。将容器内的文件复制到宿主机。
2024年前端最新Docker 安装 Nginx 部署前端项目_docker安装nginx(2)，2024年最新学生会面试题选择题
2401_84435885的博客
05-13 846
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】`-it` 以交互式进入容器 ，`bash`保留为容器终端的输入形式，所以结合起来就是进入容器终端并且的保留为容器终端的输入形式(-it和bash的结合作用)!`/etc/nginx/nginx.conf`是nginx的主配置文件，具体内容留在后一章节再说吧。`/etc/nginx/conf.d`下的default.conf 就是默认 server 配置。
前端项目容器化之旅
05-16 2515
本文介绍了笔者的前端容器化部署踩坑之旅。并解决了以下几个问题： node modules缓存 镜像体积过大 镜像数量多且上线流程复杂 本文要求读者有一定的容器基础，掌握Docker的基本操作，了解K8s的Pod原理。如果还不了解，请先拉到文末，阅读参考资料。 最近将一个前端项目部署到公司的容器服务。 事情的起因是这样的：原先我们在一台服务器上部署了一套Jenkin...
nginx部署Vue前端项目
热门推荐
我们的征途是星辰大海
12-11 1万+
nginx nginx地址：10.0.1.101 位置：/usr/local/nginx/ 访问地址：10.0.1.101:80 启动[root@bj-esbp-mid1 sbin]# ./nginx查看进程[root@bj-esbp-mid1 sbin]# ps -ef | grep nginx root 14982 1 0 14:13 ? 00:00:00 n
使用docker创建nginx容器部署前端项目
qh1112的博客
07-01 628
使用docker部署nginx服务，并将前端vue项目打包部署到nginx上
【Docker】docker+Nginx部署前端项目
前端学习博客
09-21 6558
命令的意思是将 Nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。下面的配置直接照抄就好，特别注意，监听的端口号并不需要动，这里的80端口指的是容器的端口，最后我们会将容器的端口映射到我们宿主服务器的端口，比如映射到8888端口。这里镜像中的目录我们不要动，但需要保证我们项目的打包目录是。后面的test是我们构建的镜像的名称，我们可以在云服务器中的安全组进行设置。
nginx部署前端项目完整步骤（非容器化部署）
一枚小爪哇(Java)的博客
03-07 2568
nginx部署前端项目完整步骤（非容器化部署）
docker部署nginx前端项目
12-27
### 使用 Docker 部署 Nginx 前端项目 #### 获取官方镜像并启动容器 为了开始部署过程，需先获取最新的 Nginx 官方镜像。这一步骤通过执行 `docker pull nginx` 来完成，该命令会自动下载最新版本的 Nginx 到本地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值