前端服务部署

前端部署

如今主流的技术框架都是前后端分离的架构，公司前端的技术框架包括纯Html5和React。
基于Html5的项目一般都是网站、独立看板（如博望综合指挥平台看板）等。
其他的复杂型业务系统，包括手机端，基本都是基于React框架的。
如果未来有更多的前端容器，我会继续在该文档中补充。
那么下面我们分别就Html5和React这两个框架说明下具体的配置，当然在开始之前，我先简单介绍下前端运行容器nginx。

Nginx

作为目前最主流的容器，Nginx已经在项目部署、均衡负载、反向代理等技术场景中发挥着耀眼的光和热，具体关于Nginx的介绍可以参考百度百科，当然技术相关的搜索还是推荐大家用Google😂。
关于的nginx的安装我这里也不再详述，因为不同的操作的系统有不同的装法，相同的操作系统也有不同的装法，只要能装起来，配置方法和配置文件大致都是相同的。

注：公司目前统一的部署服务器环境为Centos7.5+。

Html5

Html5类型的项目，用默认的Nginx配置就可以，核心如下：

	server {
	   #侦听80端口
	   listen    80;
	   #定义使用 www.nginx.cn访问
	   server_name  www.nginx.cn;

	   #定义服务器的默认网站根目录位置
	   root html;

	   #设定本虚拟主机的访问日志
	   access_log  logs/nginx.access.log  main;

	   #默认请求
	   location / {
		   #定义首页索引文件的名称
		   index index.html index.htm;
	   }

	   # 定义错误提示页面
	   error_page   500 502 503 504 /50x.html;
	   location = /50x.html {
	   }

	   #静态文件，nginx自己处理
	   location ~ ^/(images|javascript|js|css|flash|media|static)/ {

		   #过期30天，静态文件不怎么更新，过期可以设大一点，
		   #如果频繁更新，则可以设置得小一点。
		   expires 30d;
	   }

	   #禁止访问 .htxxx 文件
		   location ~ /.ht {
		   deny all;
	   }
	}

## React 基于`React`框架的`SPA单页应用`项目，`Nginx`配置和`Html5`的相比只有稍许不同： #默认请求 location / { #定义首页索引文件的名称 index index.html index.htm; #单页类型应用统一入口文件 try_files $uri $uri/ /index.html; } 由上可见，只是对`默认请求`配置环节加上`SPA单页应用`的配置即可。关于`SPA单页应用`的解释可以参考[百度百科](https://baike.baidu.com/item/SPA/17536313?fr=aladdin "百度百科")。 ## 常用命令 ### 检测 用以下命令查找`Nginx`配置文件的位置以及验证其合法性： ```shell nginx -t ``` ### 启动 ```shell nginx ``` ### 重新加载配置 ```shell nginx -s reload ``` ### 停止 ```shell nginx -s stop ```

注：由于受不同操作系统或是否把Nginx作为系统服务等因素影响，以上命令的功能可能有不同的实现，大家自行搜索下即可。