浅谈前端自动化构建
今天给大家介绍一下，如何通过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步骤详解：
- 拉取nodejs镜像
- 容器中创建app目录
- 复制打包相关的json文件到当前文件下
- 设置淘宝源为cnpm（加快install的速度）
- install项目
- 复制所有依赖到当前文件下
- 将项目打包
- 拉取nginx镜像
- 复制nginx配置文件到/etc/nginx/nginx.conf
- 复制dist文件到指定目录
- 设置对外端口号
- 设置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
腾讯云开发者
