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

2021-02-21 14:34:51 553 收藏 8
分类专栏： Linux 文章标签： docker vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Awwwze/article/details/113917282
版权

一、思路总结

利用 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>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'

（4）新建文件 nginx.conf，指定读取路径 /usr/share/nginx/html

worker_processes auto;

 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  _;
 
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        }
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

（5）在 share 目录中，然后 用括号里指令 (docker build -t myvue:V1.0 .) 构建镜像。（注意最后的 .）

[root@wuze share]# docker build -t myvue:V1.0 .
Sending build context to Docker daemon  645.9MB
Step 1/5 : FROM nginx
 ---> ae2feff98a0c
Step 2/5 : MAINTAINER wuze <wuzest@163.com>
 ---> Using cache
 ---> 368cd9413d73
Step 3/5 : COPY dist/  /usr/share/nginx/html/
 ---> 79bf2529bb17
Step 4/5 : COPY nginx.conf /etc/nginx/nginx.conf
 ---> f3a6fcdf323f
Step 5/5 : RUN echo 'echo init ok!!'
 ---> Running in 5ceb3f41d39b
echo init ok!!
Removing intermediate container 5ceb3f41d39b
 ---> c7ff34f49d32
Successfully built c7ff34f49d32
Successfully tagged myvue:V1.0
[root@wuze share]#

在这里插入图片描述
查看镜像 docker images：
在这里插入图片描述

（6）运行生成成功的镜像：docker run -p 3000:80 -d --name myvuetest01 镜像id

  • run: 创建一个新的容器并运行一个命令
  • -d: 后台运行容器，并返回容器 ID
  • -p: 端口映射，格式为：主机 (宿主) 端口：容器端口
  • --name "myvuetest01": 为容器指定一个名称

注意 这里可能会出现一个小问题，可能会报错：

[root@wuze share]# docker run -p 3000:80 -d --name myvuetest03 c7ff34f49d32
0fef9a9d6790dc518cd7365855445f4533ab98ceacb2cd4d2a88e68d6147430c
docker: Error response from daemon: driver failed programming external connectivity on endpoint myvuetest03 (36dd00046d3b98db5876cdb4aa1b949a5a3c92efca6399617cc6e413c75e59a8):  (COMMAND_FAILED: '/usr/sbin/iptables -w10 -t filter -A DOCKER ! -i docker0 -o docker0 -p tcp -d 172.17.0.4 --dport 80 -j ACCEPT' failed: iptables: No chain/target/match by that name.
).

原因是docker 服务启动时定义的自定义链 DOCKER 由于某种原因被清掉，
重启 docker 服务及可重新生成自定义链 DOCKER。

细节：
重启后记得更换容器的名称，因为刚刚虽然没运行起来容器，但是容器确确实实是已经被创建了，所以两种方法，一种是手动删除那个没跑起来的容器，一种是再给容器起个新名字。（没有什么特殊要求的使用第二种就行了，方便简单）

[root@wuze share]# systemctl restart docker
[root@wuze share]# docker run -p 3000:80 -d --name myvuetest04 c7ff34f49d32
be9543bf00ed437e02e61bce1df075dc7d4b17da1ad76a96737ba53f6555b5cb
[root@wuze share]#

（7）查看docker容器：（利用自定义nginx镜像的nginx容器创建成功）

[root@wuze share]# docker ps
CONTAINER ID   IMAGE          COMMAND                  CREATED              STATUS              PORTS                  NAMES
be9543bf00ed   c7ff34f49d32   "/docker-entrypoint.…"   About a minute ago   Up About a minute   0.0.0.0:3000->80/tcp   myvuetest04

在这里插入图片描述

（8）放行防火墙端口（3000端口），并重启防火墙

[root@wuze share]# firewall-cmd --zone=public --add-port=3000/tcp --permanent
success
[root@wuze share]# systemctl restart firewalld.service

通过下面命令可以查看防火墙当前对端口的放行状态：

[root@wuze share]# firewall-cmd --list-all

如果有看到 3000端口 的影子就说明放行成功。

（9）开放阿里云安全组（3000端口）

去控制台，添加3000端口，阿里云安全组添加后即可生效，不需要重启（千万不要重启阿里云服务器啊！）

（10）部署好后，本地目录 dist 下的内容可以删掉（不必须）

（11）本地浏览器访问测试（域名:3000或者 服务器ip:3000）

如果不想访问时出现:3000端口的字样，可以在前面 “创建并运行容器” 那里将容器的端口改成80，因为http协议默认端口为80

项目就算部署成功了！搞定收工！

（12）后续：可以将镜像打包发布到 DockerHub，提供给其他人下载、开发

[root@wuze share]# docker tag c7ff34f49d32 wuzewz/myvue1224:1.0
[root@wuze share]# docker push wuzewz/myvue1224:1.0
The push refers to repository [docker.io/wuzewz/myvue1224]
3610e5e82cf2: Pushed 
326e772158f9: Pushed 
4eaf0ea085df: Mounted from library/nginx 
2c7498eef94a: Mounted from library/nginx 
7d2b207c2679: Mounted from library/nginx 
5c4e5adc71a8: Mounted from library/nginx 
87c8a1d8f54f: Mounted from library/nginx 
1.0: digest: sha256:d432798af2695fc0c552303676f6ad4bba546fd2f4606ab5b30e9e4ec5033113 size: 1779
[root@wuze share]#

在这里插入图片描述
搞定收工！

已标记关键词 清除标记
Docker 方式 部署 vue 项目 （docker + vue + nginx）
愿我如星君如月 ... 夜夜流光相皎洁 ...
11-27 1万+
1.安装好 nginx 。 2. 把 vue 项目的源码克隆到确定目录下。用 git 管理，所以直接 git clone 到既定目录就行了。 如我的目录是：/root/jiangyu/projects/gentle_vue/gentle_vue_code 。 3. 项目打包： npm run build 会自动生成 dist 文件夹 。 4. 在任意目录下新建文件 docke...
表情包
插入表情
还能输入1000个字符
docker + nginx 部署vuejs3.0项目
blackof2012的专栏
07-03 591
1：用指令 npm run build 打包vusjs项目（该项目是在github上下载的）。打包成功后会生成一个目录dist。 2：把该文件夹拷贝到腾讯云服务器（操作系统 centos7）下的/usr/share目录下。 3：在/usr/share目录下新建Dockerfile文件 dockerfile文件内容： 复制代码 设置基础镜像 FROM nginx 定义作者 MAINTAINER...
docker下nginx部署vue项目
梦里图绪的博客
04-05 1519
环境centos7 准备: 安装git 安装nodejs 安装docker 拉取git仓库 cd ~ #进入home目录 git clone *********.sto.git #后面是仓库地址 切换分支 cd ~/sto git branch -a #查看分支 以* 开头的是当前分支 *master dev remotes/origin/HEAD -&gt...
docker nginx部署项目，vue+ ivew
SILVER__的博客
08-14 177
1. docker安装nginx，参考菜鸟教程 https://www.runoob.com/docker/docker-install-nginx.html nginx安装成功后，为我们要部署的文件，指定运行项目的目录，关键如下 首先创建nginx所需目录，www为运行项目，logs日志存放地点，conf配置文件 mkdir -p ~/nginx/www ~/nginx/logs ~/nginx...
【容器技术】Docker镜像 + nginx 部署Vue项目
小石头的幸福—2014
03-25 9707
如果使用docker部署思维要做转变，以前：启动nginx或者tomcat,把打包的war或者是静态html丢在web服务器项目工程文件夹下现在：项目还有项目需要依赖的tomact,nginx,还有其他环境，甚至是操作系统，其他等等，全部制作成一个镜像，任何一台电脑，只要安装了docker,都能直接运行这个镜像，发布你自己的工程，完全独立的虚拟环境现在就以vue项目为例，基于docker镜像发布工...
VUE 怎么部署到docker上
07-31
请问vue怎么部署到docker？？？？
docker学习-构建vue开发环境
duziea的博客
12-24 1044
dockerfile文件如下 ## 选node作为基础镜像 FROM node:latest ##换源安装vuecli RUN \ npm config set registry https://registry.npm.taobao.org \ && npm install -g @vue/cli ## 创建一个目录 RUN mkdir /data ## 指定工作目录 WORKD...
windows 系统下的docker 外置vue开发环境
程序笔记的博客
05-08 767
安装环境 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 搭建vue-cli开发环境
NIJIA72的专栏
04-07 511
目标 开发机上0环境，全都由容器实现 开始 1）创建一个项目目录 2）编写一个 Dockerfile文件（区分大小写），创建一个开发环境镜像 Dockerfile FROM node:10.19.0-stretch-slim # system local config RUN true \ # debian china mirrors && se...
用Docker搭建Laravel和Vue项目的开发环境
weixin_34342992的博客
03-03 307
在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速、轻量级、不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境（开发环境的所有依赖都安装在Docker构建容器里），加入Vue只是因为有的项目里会在Laravel项目中使用Vue做前后端分离开发，开发环境中需要安装前端开发需要的工具集，当然前后端也可...
docker系列之nginx部署vue前端项目
qq_24392951的博客
03-27 1081
docker系列之nginx部署vue前端项目 1、（1）启动nginx容器同时把目录挂载到宿主机，这样在宿主机修改代码，修改配置文件等都会及时同步到nginx中,非常方便 启动nginx成功！ （2）可以查看宿主机和容器的挂载详情，使用命令： docker ps 查看containerId docker inspect containerId 2、npm run build 打包vue项...
docker+nginx部署vue项目
DuebassLei的博客
01-02 594
环境 Centos 7 Docker Nginx 将项目打包 yarn run build 打包生成生成dist静态资源目录 我这里资源文件放置在阿里云服务器/usr/gaolei/dockers/nginx-docker下 编写Dockerfile vim Dockefile ...
【笔记】【踩坑】Docker + Nginx + Vue部署前端项目和跨域CORS解决
LeoSong121的博客
12-15 165
1. 前言 由于项目使用的前后端分离结构，采用nginx作为服务器代理前端解决跨域问题。 阅读本文之前，需要有了解过Docker、Vue、Nginx、CORS内容。 文章之前，有必要介绍一下CORS：跨域资源共享（Cross-origin resource sharing） 什么叫同源，必须同时满足以下三点： 协议相同 域名相同 端口相同 2. 部署 2.1 使用Vue生成前端文件 npm install npm run build:dev 注意： 这里前端配置访问后端的BASE
「 Vue×Docker」服务器部署Vue遇到的那些坑
Hugh
06-13 5372
项目之前一直在电脑本地做的，废弃了很久才想起来部署到服务器上。因为是第一次用vue，发布时遇到了很多问题，用了5个小时才解决掉。 主要问题有两个： 1. 不清楚如何发布vue项目，服务器上npm run dev只能本地测试使用。 2. 数据接口的代理加载不出资源。 服务器环境： linux 7.0 x86_64 npm 6.1.0 vue 2.9.6 docker...
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页