打包Docker镜像并部署Vue项目

12/25/2021 Docker

自己动手打包部署Vue项目

# 准备

  • Vue打包的项目(dist)
  • Dockerfile
  • nginx.conf
  • Docker环境

# 编写Dockerfile

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf

# 编写nginx.conf

        #user  nobody;
        worker_processes  1;
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;

    #pid        logs/nginx.pid;


    events {
        worker_connections  1024;
    }


    http {
        include       mime.types;
        default_type  application/octet-stream;

        #access_log  logs/access.log  main;

        sendfile        on;
        #tcp_nopush     on;

        #keepalive_timeout  0;
        keepalive_timeout  65;

        #gzip  on;

        client_max_body_size   20m;
        server {
            listen       80;
            server_name  www.koyang.com;

            #charset koi8-r;

            #access_log  logs/host.access.log  main;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        }

    }
</pre>
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    client_max_body_size   20m;
    server {
        listen       80;
        server_name  www.koyang.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    }

}

# 打包镜像

在当前目录打开terminal

docker build -t vue-demo .

这样就生成了一个名为vue-demo的镜像包

# 运行容器

docker run --name vue -p 8080:80 -d vue-demo

浏览器输入localhost:8080 (opens new window)就可以访问了前端页面了

# 推送镜像到Docker hub

# 登录用户

docker login

# 修改镜像tag

docker tag 原镜像名 注册用户名/镜像名

# 推送

docker push boonyadocker/tomcat-allow-remote:latest

Last Updated: 2/11/2022, 2:51:08 PM