浅谈前端自动化构建

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 - $remot{e}_{u}ser[$time_local] “$request” ’

'$status $bod{y}_{b}yte{s}_{s}ent"$http_referer" ’

‘“$htt{p}_{u}se{r}_{a}gent""$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 - $remot{e}_{u}ser[$time_local] “$request” ’

'$status $bod{y}_{b}yte{s}_{s}ent"$http_referer" ’

‘“$htt{p}_{u}se{r}_{a}gent""$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 - $remot{e}_{u}ser[$time_local] “$request” ’

'$status $bod{y}_{b}yte{s}_{s}ent"$http_referer" ’

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。