Docker+Nginx 部署 Vue 项目(保姆级总结)

一、思路总结

利用 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]#

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页