在Docker中使用Nginx部署Vue项目

原创 已于 2024-03-23 13:22:12 修改 · 6.2k 阅读 · 38 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#docker #vue #nginx

于 2022-04-18 00:27:35 首次发布
本文详细介绍了如何在Linux环境下，通过Docker和docker-compose部署Vue项目。首先确保安装了Docker和docker-compose，接着打包Vue项目，拉取Nginx镜像，并创建一个目录存放相关文件。编写Nginx配置文件和Dockerfile，然后使用docker-compose打包镜像并启动容器。最后，测试访问Vue项目，解决可能遇到的网络配置问题。

文章目录

一、前置需求

1.liunx环境

本人用的 Centos7

2.安装Docker

参考这篇文章
https://blog.youkuaiyun.com/weixin_43721000/article/details/124237932

3.安装docker-compose

参考这篇文章
https://blog.youkuaiyun.com/weixin_43721000/article/details/125425947

二、部署方法

1.打包Vue项目

npm run build

打包好之后项目下会有一个dist文件夹
在这里插入图片描述

2.Docker拉取Nginx镜像

docker pull nginx

在这里插入图片描述

3.创建一个打包镜像的目录

创建一个文件夹，把之后需要打包镜像的文件全部放里面，我这里直接在根目录下创建了一个VueProjects文件夹

cd /
mkdir VueProjects

进入 VuePr

最低0.47元/天 解锁文章
精选资源
Docker镜像+nginx 部署 vue 项目的方法
01-09
　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。 　如果将该dist目录整个传到服务器上，部署成静态资源...
docker+nginx快速部署vue项目
u010227042的博客
09-14 2476
1.1. 前端开发工具：JetBrains WebStorm 2019.2.4 x64。1.7. 服务器系统：CentOS 7.6 64bit。1.4. node.js版本： v12.13.0。1.5. vue-cli版本: v4.4.6。1.2. 服务器文件传输软件：WinSCP。1.3. 服务器连接软件：Xshell。1.6. vue 版本：2.9.6。
docker安装nginx，发布部署vue项目
qq_25445369的博客
06-25 1782
前后端项目，实现前后端简单部署到服务器。前端vue，后端springboot。服务器ubuntu（18.04）<linux系统同理>.后端通过(nohup java -jar xxx.jar &) 指令简单部署。该文主要说明部署前端vue项目。部署vue需要安装nginx。安装nginx方式有两种，1、可以在服务器上下载nginx压缩包，解压即可。2、使用docker容器。该文使用docker容器安装，压缩包，可自行百度一下。
nginx前端、后端、docker-compose部署，基本配置
weixin_41929627的博客
09-02 839
Nginx部署配置指南 本文介绍了Nginx的多种部署配置方法，主要包括： 静态文件部署：配置server、location和root指令，指定网站根目录 反向代理：通过location配置代理后端API服务 HTTPS配置：监听443端口并配置SSL证书 负载均衡：使用upstream定义后端服务器组 缓存配置：通过proxy_cache_path设置缓存路径 高可用配置：推荐使用Nginx+keepalived方案 Docker部署：通过docker-compose管理Nginx和后端服务 文中提供了详
docker 安装 nginx 部署Vue前端项目
weixin_48568302的博客
03-18 1541
docker 安装 nginx 部署Vue前端项目
VUE 项目用 Docker+Nginx进行打包部署
CC酱写前端的博客
06-18 3532
这个文件将被 Nginx 加载以配置网站的行为，例如设置代理、重定向等。这意味着当你访问 Nginx 服务器时，这些静态文件将被提供给客户端。命令重新启动它，这次使用正确的端口映射。端口，你需要确保 Docker 容器的端口映射也相应地设置为。：指定基础镜像，这里使用的是 Nginx 的官方镜像，标签为。目录中的所有文件复制到 Nginx 的默认网页根目录。： 首先，你需要找到容器的 ID 或名称。命令加上容器的 ID 或名称来停止容器。这将覆盖默认的 Nginx 配置。命令列出所有正在运行的容器。
Docker部署Nginx+Vue项目
qq_33930691的博客
05-14 1245
使用Docker部署Nginx+Vue项目
docker使用Nginx部署Vue项目（云服务器）
2301_81405087的博客
10-14 2203
注意一定要去自己的云服务器开一下端口号（linux的话要关闭一下防火墙）注意一定要去自己的云服务器开一下端口号（linux的话要关闭一下防火墙）
Docker+Nginx部署vue项目
m0_46219714的博客
04-14 1182
这篇文章给大家分享一下如何使用Docker+Nginx部署前端vue项目。
version: nginx/1.16.1 vhost.conf 原始文件格式
weixin_30510153的博客
08-16 537
server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/host.access.log main; location / { root /usr/share/nginx/...
Docker使用nginx部署VUE项目
qq_45878280的博客
05-02 3170
本文主要记录了用docker部署vue项目的过程，使用docker和docker-compose两种部署方法，部署难度主要在于理解nginx的配置文件和Dockerfile文件的编写。
docker单个nginx容器部署多个vue项目
最新发布
DN金猿的博客
09-24 172
摘要：本文介绍Docker部署多个Vue项目的三种方法：1）独立容器法，为每个项目创建单独容器，通过不同端口访问；2）Nginx反向代理法，使用单个容器通过路径区分不同应用；3）分域名部署法，通过不同域名访问各项目。重点详解了前两种方法的实施步骤，包括Dockerfile编写、Nginx配置和容器运行命令，并比较了隔离部署与资源优化的适用场景。部署时需注意Vue项目的publicPath设置和Nginx的路径匹配规则。
Docker+Nginx 部署 Vue 项目（保姆级总结）
Awwwze的博客
02-21 5034
一、思路总结 利用 Docker + Nginx 部署 Vue 项目，先将 Vue 项目通过 build 命令构建成一个 dist文件夹，然后将这个文件夹交给 nginx 进行代理（这里利用的是反向代理，作用是可以对外隐藏项目的真实端口），然后编写 Dockerfile文件，在 nginx 基础镜像之上，构建一层属于我们自己的镜像，然后打包，Dockerfile 主要是配置 “vue 项目目录” 和 “nginx的配置文件”，将这两个文件拷贝映射到 nginx 容器内部。编写好 Dockerfile 文件后
Docker Nginx容器部署vue项目
囚徒之困
11-27 1162
nigx容器部署vue项目
使用Docker Nginx部署vue项目
weixin_47906106的博客
07-20 4407
执行完成后，会在Vue项目下会生成一个dist目录，该目录一般包含index.html文件及static目录，static目录包含了静态文件js、css以及图片目录images（如果有图片的话）。Nginx是一个能在Docker容器中运行的HTTP(s)服务器。可以直接打开index.html查看效果，可能会出现各种原因的报错，适当的去解决。将项目上传到服务器后开始构建镜像(我是在服务器上从github上拉去的项目)在项目根目录创建nginx.conf文件。......
docker 安装 nginx 发布Vue项目
热门推荐
Good Luck
08-02 1万+
docker 安装 nginx 发布Vue项目 nginx配置文件、html文件、logs日志文件。
docker部署vue项目（基于Nginx）
it_xiaoqiao的博客
05-31 648
1，获取Nginx镜像 docker pull nginx 2，创建Nginx文件夹存放conf,html,Dockerfile文件（我的目录为/root/nginx） mkdir conf html touch Dockerfile 3，将vue项目编译，生成dist文件夹，将整个文件夹上传到Nginx目录下;如图： 4，编写Dockerfile文件 vi Dockerfile 添加一下内容： FROM nginx COPY dist/ /usr/share/nginx
Docker+Nginx部署Vue项目
飞飞的冰糖雪梨
10-15 256
Docker+Nginx部署Vue项目 step1 在服务器上创建一个文件夹，名字随意 step2 往这个文件夹下放三个item 其中，default.conf是nginx的配置文件，不做赘述 server { listen 80; server_name localhost; # 修改为docker服务宿主机的ip location / { root /usr/share/nginx/html; index ind
docker+nginx部署vue项目在服务器上
weixin_44747173的博客
10-28 2594
在上述的部署中我们发现一个很大的缺陷就是如果项目修改之后要重新部署的话十分麻烦，必须得先把打包文件上传到服务器，再从服务器上传到容器中，而且如果要修改配置的话也得先进入服务器再从服务器进入到容器中修改，那是否有更加简单的方法呢，答案是肯定的，有！使用docker-compose部署的好处就是他将原本要传入容器的dist文件和要在容器中修改的配置文件挂在了外面，这样就可以不用进入容器操作了。先将dist文件上传到宿主机(服务器)，上传可以使用xftp，再从宿主机将文件copy到容器中。
如何使用docker中的nginx部署vue项目
07-08
要使用 Docker 配置 Nginx 来部署 Vue 项目，可以创建一个自定义的 `Dockerfile` 文件，并基于官方的 Nginx 镜像进行扩展。以下是完整的配置步骤： ```dockerfile # 使用 nginx 官方镜像作为基础镜像 FROM nginx #...
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

什么都干的派森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值