Docker 部署 vue 项目（Nginx）

最新推荐文章于 2023-07-25 17:51:25 发布
最新推荐文章于 2023-07-25 17:51:25 发布
阅读量275 收藏
点赞数
分类专栏： docker 文章标签： docker vue nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30072293/article/details/113248207
版权

环境：win10上安装的docker

1.在桌面上新建一个文件夹dockertest

里面有两个文件

dist:   vue项目打包之后生成的dist文件复制过来的

Dockerfile:   Dockerfile 是一个用来构建镜像的文本文件，注意这个没有文件后缀（可参考：https://blog.51cto.com/14156658/2497164）

Dockerfile文件里的内容

# 设置基础镜像  nginx 是镜像名称
FROM nginx
# 定义作者
MAINTAINER wxh
# 将dist文件中的内容复制到 /usr/share/nginx
最低0.47元/天 解锁文章
时光旅行者一号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Docker+Nginx 部署 Vue 项目（保姆级总结）
Awwwze的博客
02-21 4472
一、思路总结 利用 Docker + Nginx 部署 Vue 项目，先将 Vue 项目通过 build 命令构建成一个 dist文件夹，然后将这个文件夹交给 nginx 进行代理（这里利用的是反向代理，作用是可以对外隐藏项目的真实端口），然后编写 Dockerfile文件，在 nginx 基础镜像之上，构建一层属于我们自己的镜像，然后打包，Dockerfile 主要是配置 “vue 项目目录” 和 “nginx的配置文件”，将这两个文件拷贝映射到 nginx 容器内部。编写好 Dockerfile 文件后
windows 系统下的docker 外置vue开发环境
程序笔记的博客
05-08 1057
安装环境 DockerToolbox-18.03.0-ce node-8.9.3 外置需要文件交换 注意编译器没有开发环境，仅仅是一个代码提示工具 1.使用FTP进行文件交换 2.使用共享文件夹进行交换 3.使用samba服务器进行交换 我自己使用的共享文件夹交换 步骤1 docker pullnode-8.9.3 步骤2 运行node环境 docker run...
Docker用Nginx部署Vue项目
王小白的博客
12-20 771
首先用指令 npm run build 打包vue项目。打包成功后会生成一个目录dist。 把该文件夹拷贝到云服务器（CentOS7）下的/data/idea/web/demo目录下(该目录随意即可)。 在该目录下新建Dockerfile文件和nginx.conf文件 touch Dockerfile touch nginx.conf 通过vim编辑Dockerfile文件内容: # 设置基础镜像 FROM nginx # 定义作者 MAINTAINER wangmou # 将d.
vue项目docker docker-compose 本地开发环境配置
前端kk的博客
07-25 819
配置Docker Compose用于在本地开发Vue项目是一个方便且高效的方法。Docker Compose允许您定义和管理多个容器组成的应用程序。
docker 部署vue+nginx
weixin_44442366的博客
01-30 2860
获取 nginx 镜像 docker pull nginx 打包vue项目 npm run build,打包成功会出现dist文件夹 在同目录下新建default.conf文件用于配置nginx， 文件内容如下 server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/nginx/host.access.log main; error_l.
docker + nginx 部署vuejs3.0项目
weixin_43742121的博客
06-17 244
https://www.cnblogs.com/longdb/p/10770661.html
基于Vue.js的新冠疫情自我检测系统网页设计与开发
SylvanDing's Blog
09-25 1200
Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息，只供参考之用，不保证信息的准确性、有效性、及时性和完整性，更多内容请查看国家卫健委网站！
基于docker的Vue项目开发
qq_33177268的博客
01-06 1744
一、导语 二、安装 2.1 安装docker 2.2 安装node.js 指定node版本和映射端口 docker run -itd --name node_pigx -p 8080:8080 node:14 也可以不指定，不映射 docker run -itd --name node_pigx node 2.3 安装VScode 2.4 安装插件：Docker、Remote - Containers （Microsoft开发的所有Remote开头的插件都值得安装） 之后就可以“远程”开发运行在dock
cenos7 下 docker 部署 vue+nginx
最新发布
01-30
cenos7 下 docker 部署 vue+nginx 步骤
Docker结合Jenkins部署vue项目
01-20
Docker结合Jenkins部署vue项目 接上篇 Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动 Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx 安装nginx 这里...
详解用Docker搭建Laravel和Vue项目的开发环境
09-30
主要介绍了详解用Docker搭建Laravel和Vue项目的开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
手把手教你实现Docker 部署 vue 项目
09-29
主要介绍了手把手教你实现Docker 部署 vue 项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
luinx下载nginx部署vue项目以及docker部署vue项目
03-19
luinx下载nginx部署vue项目以及docker部署vue项目
Luinx下安装nginx部署vue项目以及使用docker部署vue项目
03-19
Luinx下安装nginx部署vue项目以及使用docker部署vue项目
meiduo:Django + Vue 前后端分离商城项目，采用Docker双容器部署nginx + uwsgi
07-24
部署方式：docker容器部署 nginx(vue) + uwsgi(django) 给出体验地址： 121.4.47.229:8080 因为钉钉、QQ、支付宝等回调地址的原因，为了更好的体验，请在本机hosts中添加： 121.4.47.229 image.meiduo.site 121.4.47...
linux系统下docker搭建vue前端项目开发运行环境详解
最爱嫣夜来
04-08 2009
1、 初衷 最近做了几个前后端项目，在前后端项目链条的时候，发现在windows系统下安装前端发过来的vue项目的依赖的时候各种报错， npm install一直无法安装，但是我在linux系统下面安装了nodejs环境之后，执行npm install 很快成功了，于是我就把项目的开发环境转移到linux开发服务器下面去了，突然起了一个想法就是能不能使用docker来配置开发环境， 每一个项目都单独整一个开发运行环境来跑，抱着试试看的心态做了一下尝试， 发现成功了，现在把具体的操作进行一下记录，分享给同样爱
Docker+Nginx部署Vue项目
飞飞的冰糖雪梨
10-15 173
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部署vue+nginx
Yuudachi的博客
05-11 266
1. 安装nginx docker pull nginx 2. 将Vue项目打包 npm run build 3. 将dist文件夹上传到服务器上，并且编写Dockerfile文件 修改nginx.conf 配置文件 user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 10
用Docker搭建Laravel和Vue项目的开发环境
weixin_34342992的博客
03-03 516
在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速、轻量级、不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境（开发环境的所有依赖都安装在Docker构建容器里），加入Vue只是因为有的项目里会在Laravel项目中使用Vue做前后端分离开发，开发环境中需要安装前端开发需要的工具集，当然前后端也可...
docker 部署vue项目
05-20
要将 Vue 项目部署到 Docker 中，需要以下步骤： 1. 确保你已经安装了 Docker。 2. 在项目根目录下创建一个 Dockerfile 文件，内容如下： ``` # 基础镜像 FROM nginx # 复制项目 COPY dist/ /usr/share/nginx/html/ # 开放 80 端口 EXPOSE 80 ``` 这里使用的是官方的 Nginx 镜像作为基础镜像，然后将项目打包好的 dist 目录复制到镜像的 /usr/share/nginx/html/ 目录下，最后开放 80 端口。 3. 在项目根目录下执行以下命令构建镜像： ``` docker build -t my-vue-app . ``` 这里将镜像命名为 my-vue-app，注意后面的 . 表示当前目录。 4. 执行以下命令启动容器： ``` docker run -d -p 8080:80 my-vue-app ``` 这里将容器的 80 端口映射到主机的 8080 端口上，可以通过 http://localhost:8080 访问 Vue 应用。 5. 如果需要停止容器，可以执行以下命令： ``` docker stop 容器ID ``` 其中容器ID可以通过以下命令查看： ``` docker ps ``` 如果需要删除容器，可以执行以下命令： ``` docker rm 容器ID ``` 如果需要删除镜像，可以执行以下命令： ``` docker rmi 镜像ID ``` 其中镜像ID可以通过以下命令查看： ``` docker images ``` 希望以上步骤可以帮助你成功部署 Vue 项目到 Docker 中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值