浅谈前端自动化构建

今天给大家介绍一下,如何通过docker,自动化构建vue项目。

现在系统大部分都采用k8s进行容器化部署,后端项目docker化很简单,特别是springboot项目,只要在dockerfile中添加相关命令,即可做到提交代码自动构建到云端。

那vue项目呢?如何才能实现自动化构建部署呢?

传统发版痛点:

传统的vue项目,很多都是通过前端手动打包成html静态文件,然后通过ftp传输到nginx所在服务器中。如果需要频繁发布前端项目,那工作量是非常大的,而且还需要安装ftp工具,服务器的密码也有安全隐患。

那vue项目到底该如何进行docker化呢?

vue项目说白了就是一个html文件,需要部署在tomcat、nginx这些容器服务器上面,相对于tomcat,nginx使用起来会更加便捷,节省资源,所以本文主要以nginx为例,给大家介绍。

既然vue是部署在nginx上面的,我们就先来看一下DockerFile文件是如何初始化nginx容器。

DockerFile文件

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN cnpm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build-stage /app/dist /usr/share/nginx/front

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

DockerFile步骤详解:

  1. 拉取nodejs镜像

  2. 容器中创建app目录

  3. 复制打包相关的json文件到当前文件下

  4. 设置淘宝源为cnpm(加快install的速度)

  5. install项目

  6. 复制所有依赖到当前文件下

  7. 将项目打包

  8. 拉取nginx镜像

  9. 复制nginx配置文件到/etc/nginx/nginx.conf

  10. 复制dist文件到指定目录

  11. 设置对外端口号

  12. 设置nginx启动命令

DockerFile内容很简单,就是安装nodejs、nginx,然后将vue项目打包成html,部署并启动nginx。

nginx服务一切的重点都在nginx.conf配置文件中,我们来看看nginx.conf该如何写

nginx.conf配置文件

user  nginx;
worker_processes  auto;

#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;
    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;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    client_max_body_size 500M;
    client_header_buffer_size 10m;
    large_client_header_buffers 4 10m;

    gzip on;
    gzip_static on;
    gzip_min_length 1k;
    gzip_comp_level 5;

    gzip_types
    application/javascript
    application/x-javascript
    application/xml
    application/json
    text/javascript
    text/css
    text/plain;

    upstream api {
        server 	127.0.0.1:8002;
    }

    server {
        listen       80;
        server_name 127.0.0.1;
	    root /usr/share/nginx/front;

        location = / {
            index  index.html  index.htm;
            try_files $uri $uri/ /index.html;
        }

        location ^~ /api/ {
            proxy_pass http://api;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
           root   html;
      }
    }
}

配置文件代码看似乎很多,其实就是做http请求代理,将html页面返回给客户端,vue项目中涉及到的http请求就通过api代理到具体的后端服务去。

难点突破

到这一步基本没啥难的,那如果整个前端系统是由多个子系统构成的呢,换句话来说就是有多个vue项目呢,这个时候我们该怎么办呢?

这边我们以最简单的2个模块为例,前端系统由A模块和B模块构成,A模块为系统的入口,这个时候我们可以将nginx.conf配置文件修改为如下所示:

A模块nginx.conf配置文件

user  nginx;
worker_processes  auto;

#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;
    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;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    client_max_body_size 500M;
    client_header_buffer_size 10m;
    large_client_header_buffers 4 10m;

    gzip on;
    gzip_static on;
    gzip_min_length 1k;
    gzip_comp_level 5;

    gzip_types
    application/javascript
    application/x-javascript
    application/xml
    application/json
    text/javascript
    text/css
    text/plain;

    upstream other-vue {
        server  127.0.0.1:8001;
    }

    upstream api {
        server 	127.0.0.1:8002;
    }


    upstream other-api {
        server 	127.0.0.1:8003;
    }

    server {
        listen       80;
        server_name 127.0.0.1;
	    root /usr/share/nginx/front;

        location = / {
                  index  index.html  index.htm;
                  try_files $uri $uri/ /index.html;
        }

        location ^~ /api/ {
                  proxy_pass http://api;
                  proxy_set_header Host $host;
                  proxy_set_header X-Real-IP $remote_addr;
                  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }


         location ^~ /other/ {
	        proxy_pass http://other-vue;
   	     }
   	     
   	       location ^~ /otherApi/ {
                  proxy_pass http://other-api;
                  proxy_set_header Host $host;
                  proxy_set_header X-Real-IP $remote_addr;
                  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }

          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
                root   html;
          }
    }
}

other路径所指向的就是B模块所对应的nginx服务ip,这边很重要的一点是:B模块对应的请求不能写在B模块自己的nginx.conf中,必须写在转发地址那里(也就是A模块),B模块中仅仅是一个html页面代理。

B模块nginx.conf配置文件

user  nginx;
worker_processes  auto;

#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;
    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;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    client_max_body_size 500M;
    client_header_buffer_size 10m;
    large_client_header_buffers 4 10m;

    gzip on;
    gzip_static on;
    gzip_min_length 1k;
    gzip_comp_level 5;

    gzip_types
    application/javascript
    application/x-javascript
    application/xml
    application/json
    text/javascript
    text/css
    text/plain;

    server {
        listen       8001;
        server_name 127.0.0.1;
	    root /usr/share/nginx/front;

        location ^~ /other/ {
	       index  index.html index.htm;
           try_files $uri $uri/ /index.html;
   	    }

          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
                  root   html;
          }
    }
}

B模块的nginx.conf配置文件很简单,只需要配置html代理就可以了,其中B模块所涉及到所有后端的请求,都必须放置在A模块中。

这边需要注意的是A模块和B模块都需要部署成为nginx项目,因为上面已经介绍过了,所以就省略了这一块的内容。

总结:

多说一点废话哈,现在容器化部署已经成为一种趋势,特别是企业级项目动不动就几十个上百个项目,如果人为jar部署,几乎是一件不可能完成的任务。但是想要自己搞定k8s一整套的东西,肯定得花费很长的时间,如果大家不想自己搭建k8s又想享受它带来的便利,可以借助腾讯云的k8s或者阿里云的k8s来实现。

-----------------------

公众号:林老师带你学编程

网站:wolzq.com

代码无非增删改查,关注老师给你Coding

林老师带你学编程https://wolzq.com 

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