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

最新推荐文章于 2024-04-14 13:41:53 发布
最新推荐文章于 2024-04-14 13:41:53 发布
阅读量4.6k 收藏 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
sg_knight的专栏
05-05 293
1、搜索nginx镜像 docker search nginx 2、拉取nginx镜像 docker pull nginx 3、查看镜像 docker images 4、创建nginx实例 docker run --name nginx-8080 -p 8080:80 -d nginx run 创建容器实例 -- name 容器命名 -v 映射目录 -d 设置容器后台运行 -p 本机端口映射 将容器的8080端口映射到本机的80端口 5、启动容器 doc..
Gitlab私有化部署CICD自动化构建测试环境-vue前端(保姆级教程)
最新发布
JeffreyCheung_的博客
10-18 779
以上步骤可实现自动化构建代码，自动化构建镜像，自动化部署Docker镜像，提交代码到项目代码仓库master主分支，即可触发CICD。
Docker+Nginx部署vue项目
m0_46219714的博客
04-14 898
这篇文章给大家分享一下如何使用Docker+Nginx部署前端vue项目。
docker系列之nginx部署vue前端项目
qq_24392951的博客
03-27 1600
docker系列之nginx部署vue前端项目 1、（1）启动nginx容器同时把目录挂载到宿主机，这样在宿主机修改代码，修改配置文件等都会及时同步到nginx中,非常方便 启动nginx成功！ （2）可以查看宿主机和容器的挂载详情，使用命令： docker ps 查看containerId docker inspect containerId 2、npm run build 打包vue项...
Docker部署Vue项目
L_S_G123的博客
09-20 714
Docker部署Vue项目
Docker部署vue项目
weixin_42384168的博客
05-24 1060
环境：CentOS7。
docker部署vue项目
weixin_41996632的博客
07-17 415
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 8046
Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。
基于Docker-compose编排部署sentiment-analyzer情感分析系统（老保姆级讲解-部署）
3322855165
07-26 1021
基于Docker-compose编排部署sentiment-analyzer情感分析系统 ，从讲解到部署保姆级教学，主要内容dockerfile docker-compose，持续更新
码神之路博客部署教程【完整版】基于Linux的Docker部署教程非常详细
m0_67393413的博客
07-30 541
之所以这么做，是因为我希望将mysql数据存储在宿主机上，docker中只是配置一个mysql环境，如果将数据库文件存储在docker上，一旦删除容器(通过rm指令)，所有的数据文件都会消失，很不安全。就是起到了编排目录的功能，关于这个挂载目录，请大家千万注意自己的目录顺序，跟着各种教程做的时候要分清他们的目录顺序和自己的目录顺序，下面是我的目录顺序。其中cd是切换目录的意思，rz是上传文件。感谢你的来访，如果觉得写的不错，麻烦点个赞鼓励一下，有问题也请留言，欢迎指出问题。...
将前端项目部署到docker
qq_37061571的博客
08-09 669
获取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 207
Docker 部署 vue 项目# Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。 Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置...
yum 安装 nginx 初始的 配置代码
雪夜里的孤狼
11-01 592
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、付费专栏及课程。

余额充值