Docker+Nginx 部署 Vue 项目（保姆级总结）

最新推荐文章于 2024-08-06 10:00:00 发布
最新推荐文章于 2024-08-06 10:00:00 发布
阅读量4.5k 收藏 21
点赞数 5
分类专栏： Linux 文章标签： docker vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Awwwze/article/details/113917282
版权
本文详细介绍了如何利用Docker和Nginx部署Vue项目，包括Vue项目的打包、文件上传至阿里云服务器、编写Dockerfile、构建镜像、运行容器、设置防火墙及安全组规则，以及镜像发布到DockerHub。
摘要由CSDN通过智能技术生成

一、思路总结

利用 Docker + Nginx 部署 Vue 项目，先将 Vue 项目通过 build 命令构建成一个 dist文件夹，然后将这个文件夹交给 nginx 进行代理（这里利用的是反向代理，作用是可以对外隐藏项目的真实端口），然后编写 Dockerfile文件，在 nginx 基础镜像之上，构建一层属于我们自己的镜像，然后打包，Dockerfile 主要是配置 “vue 项目目录” 和 “nginx的配置文件”，将这两个文件拷贝映射到 nginx 容器内部。编写好 Dockerfile 文件后，通过build 命令构建镜像。最后将这个自定义的nginx镜像发布到DockerHub仓库，其他人就可以去DockerHub将镜像 pull 下来，利用这个镜像创建并运行一个容器就可以直接运行我们这个项目。

二、具体过程分析

（1）用指令 npm run build 打包 vusjs 项目。打包成功后会生成一个目录 dist
[root@wuze chess]# npm run build

在这里插入图片描述
生成了dist目录：
在这里插入图片描述

（2）把该文件夹拷贝到阿里云服务器（操作系统 centos7）下的 /usr/share 目录下
[root@wuze bigcourse]# cp -r /home/2020yunjisuan/bigcourse/chess/dist /usr/share 
[root@wuze bigcourse]# cd /usr/share/
[root@wuze share]# ll

在这里插入图片描述

（3）在 /usr/share 目录下新建Dockerfile 文件

在这里插入图片描述

Dockerfile文件内容：

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER wuze <wuzest@163.com>
最低0.47元/天 解锁文章
啊泽泽泽zz
关注
专栏目录
docker系列之nginx部署vue前端项目
qq_24392951的博客
03-27 1560
docker系列之nginx部署vue前端项目 1、（1）启动nginx容器同时把目录挂载到宿主机，这样在宿主机修改代码，修改配置文件等都会及时同步到nginx中,非常方便 启动nginx成功！ （2）可以查看宿主机和容器的挂载详情，使用命令： docker ps 查看containerId docker inspect containerId 2、npm run build 打包vue项...
Docker+Nginx部署vue项目
m0_46219714的博客
04-14 772
这篇文章给大家分享一下如何使用Docker+Nginx部署前端vue项目。
docker部署vue应用
最新发布
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
08-06 1万+
【代码】docker部署vue应用。
Docker部署Vue项目
L_S_G123的博客
09-20 670
Docker部署Vue项目
Docker部署vue项目
weixin_42384168的博客
05-24 1034
环境：CentOS7。
docker部署vue项目
weixin_41996632的博客
07-17 400
1、执行一下命令，拉去nginx镜像 docker pull nginx 2、将vue项目进行打包，sftp等方式将dist的文件放到linux系统中 3、在dist同级目录下创建Dockerfile文件，内容如下 FROM nginx:latest MAINTAINER 729253864@qq.com COPY dist/ /usr/share/nginx/html/ FROM nginx LABEL MAINTAINER="729253864@qq.com" # 瑕嗙洊default閰
[手把手系列之]Docker 部署 vue 项目
weixin_42907150的博客
02-27 7088
Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。
Docker镜像+nginx 部署 vue 项目的方法
01-09
一、打包vue项目 　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。 　如果将该dist目录整个传到服务器上...
Docker镜像+nginx 部署 vue 项目
K_lele的博客
10-26 170
vue 镜像文件
cenos7 下 docker 部署 vue+nginx
01-30
cenos7 下 docker 部署 vue+nginx 步骤
在Docker中使用Nginx部署Vue项目
什么都干的派森
04-18 5541
文章目录一、前置需求1.liunx环境2.安装Docker二、部署方法1.打包Vue项目2.Docker拉取Nginx镜像3.创建一个打包镜像的目录4.上传Vue项目5.编写Nginx配置文件6.编写Dockerfile7.创建镜像8.启动容器三、访问测试 一、前置需求 1.liunx环境 本人用的 Centos7 2.安装Docker 参考这篇文章 https://blog.csdn.net/weixin_43721000/article/details/124237932 二、部署方法 1.打包Vu
将前端项目部署到docker
qq_37061571的博客
08-09 653
获取nginx镜像 docker pull nginx 在项目根目录下创建文件default.conf，写入如下内容 server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html
docker 部署Vue项目
热门推荐
Good Luck
07-28 10万+
第一步：vue项目打包成dist。 npm run build 第二步：构建Dockerfile # 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了 FROM nginx # 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面 COPY dist/ /usr/share/nginx/html/ 第三步：安装nginx docker pull nginx docker run --name nginx -d -p 4030:8.
Docker 部署 vue 项目
q1054261752的博客
12-02 189
Docker 部署 vue 项目# Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。 Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置...
yum 安装 nginx 初始的 配置代码
雪夜里的孤狼
11-01 564
nginx yum安装后默认的 nginx.conf 配置内容，作为备忘
docker 配合nginx部署vue项目
04-19
当使用Docker配合Nginx部署Vue项目时，可以按照以下步骤进行操作： 1. 创建Docker镜像：首先，需要在项目根目录下创建一个Dockerfile文件，用于定义Docker镜像的构建规则。在Dockerfile中，可以指定基础镜像、安装依赖、拷贝项目文件等操作。例如： ``` # 使用Node.js作为基础镜像 FROM node:14.17.0 as build-stage # 设置工作目录 WORKDIR /app # 拷贝项目文件到工作目录 COPY . . # 安装依赖并构建项目 RUN npm install RUN npm run build # 使用Nginx作为基础镜像 FROM nginx:1.21.0 # 拷贝构建好的项目文件到Nginx的默认静态文件目录 COPY --from=build-stage /app/dist /usr/share/nginx/html # 拷贝Nginx配置文件到容器中 COPY nginx.conf /etc/nginx/nginx.conf # 暴露Nginx的80端口 EXPOSE 80 # 启动Nginx服务 CMD ["nginx", "-g", "daemon off;"] ``` 2. 构建Docker镜像：在项目根目录下执行以下命令，将会根据Dockerfile构建一个名为`vue-app`的镜像。 ``` docker build -t vue-app . ``` 3. 运行Docker容器：执行以下命令，将会在本地的8080端口启动一个名为`vue-d -p 80:80 --name vue-container vue-app ``` 4. 访问Vue项目：在浏览器中访问`http://localhost`，即可查看部署好的Vue项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值