Docker部署Vue 工程包

Posted guigujun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Docker部署Vue 工程包相关的知识,希望对你有一定的参考价值。

docker部署 Vue 工程包

目录结构

[[email protected] ~]# tree front/
front/
├── dist.conf
├── dist.zip
├── Dockerfile
└── nginx.conf

编写Dockerfile

这里的基础镜像是我优化过的,大家可以指定官方的

FROM nginx:1.13
MAINTAINER test
COPY dist.conf /etc/nginx/conf.d/dist.conf
COPY nginx.conf /etc/nginx/nginx.conf
RUN rm  /etc/nginx/conf.d/default.conf -rf
COPY *.zip /home/

编写代理文件

这里的 /upload/ 是代理的图片路径

server {
        listen  9528;
        server_name  localhost;
       
        location / {
                root   /home/public;
                index  index.html index.htm;
        }
       location /upload/ {
                root  /home;
        }

编写nginx.conf

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user  nginx;
worker_processes  auto;
worker_rlimit_nofile 65535; 

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections  2048;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    types_hash_max_size  2048;
    
    keepalive_timeout   60;
    proxy_connect_timeout 3s;
    proxy_read_timeout    10s;
    proxy_send_timeout    10s;

    server_names_hash_bucket_size 128;
    client_header_buffer_size 128k;
    client_max_body_size 1024m;
    large_client_header_buffers 4 128k;
    
    proxy_buffering on;
    proxy_buffer_size 4k;
    proxy_buffers 8 1m;
    proxy_busy_buffers_size 2m;
    proxy_temp_file_write_size 2m;
        
    add_header X-Frame-Options "SAMEORIGIN";

    include /etc/nginx/conf.d/*.conf;
}

build 镜像

[[email protected] ~]# docker build -t dist:v0.1 front/
ending build context to Docker daemon  2.75 MB
Step 1 : FROM nginx:1.13
 ---> d044548b1076
Step 2 : MAINTAINER test
 ---> Running in a4f82d1f813d
 ---> 11891ec35400
Removing intermediate container a4f82d1f813d
Step 3 : COPY dist.conf /etc/nginx/conf.d/dist.conf
 ---> 042ebd62c9da
Removing intermediate container 8bb11197bb6e
Step 4 : COPY nginx.conf /etc/nginx/nginx.conf
 ---> 70084e83232b
Removing intermediate container fb986e1b38cb
Step 5 : RUN rm  /etc/nginx/conf.d/default.conf -rf
 ---> Running in 84369459ea97
 ---> fa4f7acafa7b
Removing intermediate container 84369459ea97
Step 6 : COPY *.zip /home/
 ---> c8e3f0f60c6e
Removing intermediate container 011f626e50b3
Successfully built c8e3f0f60c6e

结语

这样前端工程镜像就build好了,可以执行docker run -d -p9528:9528 dist:v0.1启动

以上是关于Docker部署Vue 工程包的主要内容,如果未能解决你的问题,请参考以下文章

超详细Docker部署SpringBoot+Vue项目(三更博客项目部署)

Docker中使用Tomcat并部署war工程

docker 通过中间镜像加速部署

Docker 部署前端项目 (vue)

VUE报名系统,VUE后台管理,SpringBoot后端如何整合?

如何使用docker部署vue项目