在Docker中使用Nginx部署Vue项目

已于 2024-03-23 13:22:12 修改
阅读量5k 收藏 38
点赞数 8
分类专栏： Vue Docker 文章标签： docker vue nginx
于 2022-04-18 00:27:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43721000/article/details/124237610
版权

文章目录

一、前置需求

1.liunx环境

本人用的 Centos7

2.安装Docker

参考这篇文章
https://blog.csdn.net/weixin_43721000/article/details/124237932

3.安装docker-compose

参考这篇文章
https://blog.csdn.net/weixin_43721000/article/details/125425947

二、部署方法

1.打包Vue项目

npm run build

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

2.Docker拉取Nginx镜像

docker pull nginx

在这里插入图片描述

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

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

cd /
mkdir VueProjects

进入 VueProjects 文件夹

最低0.47元/天 解锁文章
什么都干的派森
关注
  • 8
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
Docker 通过Nginx镜像部署Vue项目
Jayson_hu的博客
10-11 2万+
下载Nginx image 编写Dockerfile 部署运行 为了演示我这边新建一个项目 # cd vue-docker # cnpm install //等待安装 # cnpm run build //build打包发布文件 可以看到这里dist文件夹中已经包含我们要发布的东西了 开始准备Docker发布我这里使用hub163中的镜像下载nginx镜像# docker pull hub.c
Docker镜像+nginx 部署 vue 项目的方法
01-09
一、打包vue项目 　　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。 　　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。 二、获取nginx 镜像 　　nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。 　　在终端输入： docker pull nginx 　　即可以获取到nginx镜像。 　　Docker镜像是一个特殊的文件系统，除了提供容器运行时
Docker通过nginx部署前端Vue项目
qq_58137891的博客
05-23 699
v /data/applications/nginx/nginx.conf:/etc/nginx/nginx.conf # 挂载的nginx配置文件目录。-v /data/applications/nginx/html:/usr/share/nginx/html # 挂载的静态文件目录。-v /data/applications/nginx/logs:/var/log/nginx #挂载nginx日志文件。/etc/nginx/cert # ssl证书挂载目录。firewalld防火墙。
VUE 项目用 Docker+Nginx进行打包部署
最新发布
CC酱写前端的博客
06-18 1338
这个文件将被 Nginx 加载以配置网站的行为，例如设置代理、重定向等。这意味着当你访问 Nginx 服务器时，这些静态文件将被提供给客户端。命令重新启动它，这次使用正确的端口映射。端口，你需要确保 Docker 容器的端口映射也相应地设置为。：指定基础镜像，这里使用的是 Nginx 的官方镜像，标签为。目录中的所有文件复制到 Nginx 的默认网页根目录。： 首先，你需要找到容器的 ID 或名称。命令加上容器的 ID 或名称来停止容器。这将覆盖默认的 Nginx 配置。命令列出所有正在运行的容器。
Docker使用nginx部署VUE项目
qq_45878280的博客
05-02 1870
本文主要记录了用docker部署vue项目的过程，使用docker和docker-compose两种部署方法，部署难度主要在于理解nginx的配置文件和Dockerfile文件的编写。
Luinx下安装nginx部署vue项目以及使用docker部署vue项目
03-19
Luinx下安装nginx部署vue项目以及使用docker部署vue项目
Docker结合Jenkins部署vue项目
01-20
Docker结合Jenkins部署vue项目 接上篇 Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动 Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx 安装nginx 这里...
luinx下载nginx部署vue项目以及docker部署vue项目
03-19
luinx下载nginx部署vue项目以及docker部署vue项目
cenos7 下 docker 部署 vue+nginx
01-30
cenos7 下 docker 部署 vue+nginx 步骤
轻松Docker+Nginx 部署Vue前端项目
aapprentice的博客
03-01 502
通过dockfile创建镜像,再通过镜像创建并运行容器,再修改nginx配置文件,即可轻松部署vue项目
Docker部署Nginx+Vue项目
qq_33930691的博客
05-14 456
使用Docker部署Nginx+Vue项目
docker安装nginx，发布部署vue项目
qq_25445369的博客
06-25 1599
前后端项目，实现前后端简单部署到服务器。前端vue，后端springboot。服务器ubuntu（18.04）<linux系统同理>.后端通过(nohup java -jar xxx.jar &) 指令简单部署。该文主要说明部署前端vue项目。部署vue需要安装nginx。安装nginx方式有两种，1、可以在服务器上下载nginx压缩包，解压即可。2、使用docker容器。该文使用docker容器安装，压缩包，可自行百度一下。
docker+nginx快速部署vue项目
u010227042的博客
09-14 2181
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部署前端项目2
尽我所能，分享开发问题的解决方式
12-20 763
通过了解nginx配置文件，nginx默认的nginx.conf文件自动加载了conf.d文件夹的全部配置文件，因此我们可以不用像之前那样直接配置nginx.conf文件，直接重写default.conf文件就可以了，比之前的方法更加简单易懂。之前的方法是修改了nginx.conf配置文件，通过之后的深入了解，发现Nginx中还有一个default.conf配置文件也可以帮我们来搭建前端，而且我这里还携带了反向代理，可能不是很好用，建议验证后使用。其他未解释的变量都是默认的，不用动。
Vue入门（四）—— 配置app.vue根组件的全局css样式
什么都干的派森
02-29 8188
1.一般的做法是在src/assets目录下新建目录css，在css目录中新建文件global.css，内容如下： /* 全局样式表 */ html, body, #app { height: 100%; margin: 0; padding: 0; } 2.打开main.js添加如下内容： // 自定义全局css import './assets/css/global.css' 这样你...
Vue入门（八）—— 配置axios全局请求根路径，并向后端发送请求
什么都干的派森
02-29 6622
1.查看项目是否包含axios，如果没有就安装依赖，打开图形界面工具，在“运行依赖”中搜索 axios 并安装 安装完毕后继续 2.打开main.js完成三步： （1）导包 （2）配置全局请求根路径 （3）挂载到vue // axios import axios from 'axios' // 配置请求根路径 axios.defaults.baseURL = 'http://127.0.0.1:8...
Vue父组件数据变化子组件不能及时响应的解决办法【watch监听】
什么都干的派森
01-17 6617
针对子组件不跟随父组件的值进行更新的这个问题，根据父组件传入的是值还是对象，可以分成以下两种解决办法。
docker nginx部署vue项目
06-28
### 回答1： 要将 Vue 项目部署在 Docker 上，可以使用以下步骤： 1. 编写 Dockerfile 文件：创建一个包含 Nginx 的 Docker 镜像，并将 Vue 项目文件复制到镜像中。 2. 构建 Docker 镜像：使用 Dockerfile 构建 Docker 镜像，例如可以使用命令：`docker build -t my-nginx-vue-image .` 3. 运行 Docker 容器：使用刚刚构建的 Docker 镜像来创建和运行一个 Docker 容器，例如可以使用命令：`docker run -d -p 80:80 my-nginx-vue-image` 4. 访问 Vue 项目：现在可以通过浏览器访问 Vue 项目，例如可以在浏览器中输入 `http://localhost` 来访问项目。 这样，您就可以在 Docker 中部署 Vue 项目了。 ### 回答2： 在将Vue项目部署到生产环境中，我们需要将Vue项目打包为静态资源，然后将静态资源放置到Web服务器上。在这里，我们介绍如何使用Docker和Nginx将Vue项目部署到Web服务器中。 第一步，将Vue项目打包为静态资源。我们可以使用Vue CLI提供的打包命令将Vue项目打包为生产版本。在终端中运行命令： ``` npm run build ``` 执行该命令后，Vue项目会将打包好的静态文件放置到dist目录下。 第二步，创建Docker文件。我们需要编写一个Dockerfile文件，并定义好环境变量和Docker镜像的基础镜像。在这里我们以Node.js作为基础镜像，Dockerfile文件的内容如下： ``` # 使用node.js基础镜像 FROM node:14.15.0-alpine3.10 as builder # 设置工作目录 WORKDIR /app # 复制package.json及package-lock.json到工作目录 COPY package*.json ./ # 安装依赖 RUN npm install # 将源码复制到工作目录 COPY . . # 进行构建 RUN npm run build # 运行时镜像的基础镜像 FROM nginx:1.19.6-alpine # 复制构建出的静态资源到镜像中 COPY --from=builder /app/dist /usr/share/nginx/html # 复制Nginx配置文件 COPY nginx.conf /etc/nginx/nginx.conf # 暴露80端口 EXPOSE 80 ``` 第三步，编写Nginx配置文件。我们需要将Nginx配置文件复制到Docker镜像中，如下所示： ``` # nginx.conf # 在http下添加gzip配置 http { gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; server { listen 80; server_name localhost; # 静态资源文件所在目录 root /usr/share/nginx/html; # 让Nginx支持Vue路由 location / { try_files $uri $uri/ /index.html; } } } ``` 第四步，构建Docker镜像。我们需要在终端中运行构建镜像的命令。在终端中进入Dockerfile所在的目录，并执行以下命令： ``` docker build -t my-vue-app:latest . ``` 命令中，“my-vue-app”是镜像的名称，“latest”是镜像的标签。如果构建成功，会在镜像列表中看到该镜像。 第五步，启动Docker容器。我们需要运行以下命令将镜像启动为Docker容器： ``` docker run --name my-vue-app -d -p 80:80 my-vue-app:latest ``` 命令中，“my-vue-app”是容器的名称，“-d”表示在后台运行，“-p 80:80”表示将容器的80端口映射到主机的80端口。如果成功运行容器，可以在浏览器中访问Vue项目。 ### 回答3： Docker 是一个强大的容器化工具，而 Nginx 是一个流行的跨平台 Web 服务器软件，可以很好地与 Docker 结合使用以部署 Vue 项目。 以下是一些步骤来完成这个过程： 1. 第一步是创建 Vue 项目。在根目录下创建一个 Dockerfile 文件，并在其中添加以下代码： ``` # 使用了一个 Node.js 镜像，以安装项目的依赖 FROM node:latest as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY ./ . RUN npm run build # 使用了一个 nginx 镜像，替换默认的 nginx.conf 文件，以及项目的 build 文件夹 FROM nginx:latest COPY --from=build-stage /app/dist/ /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf ``` 2. 在项目根目录下添加 nginx.conf 文件并进行配置。例如： ``` user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /var/run/nginx.pid; events { worker_connections 1024; } http { # 后端服务接口地址 upstream backend { server backend:80; } include /etc/nginx/mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } # 反向代理 location /api { rewrite /api/(.*) /$1 break; proxy_pass http://backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } } ``` 3. 接下来，通过 Docker 命令构建镜像并运行容器： ``` // 构建镜像 docker build -t vue-nginx . // 运行容器 docker run -it -p 80:80 --rm --name vue-nginx-container vue-nginx ``` 到此为止，Vue 项目就已经成功部署到 Docker 容器中并通过 Nginx 服务器运行了。 总的来说，使用 Docker 和 Nginx 部署 Vue 项目可以大大简化部署流程，并提供更好的容错能力和安全性。在实践中，这种部署方式已被广泛采用。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

什么都干的派森

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

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

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

打赏作者

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

抵扣说明：

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

余额充值