用户中心前端8-前端打包和部署

本项目是基于ant-design开发的一个前端项目，项目的上线地址：http://user-front.66bond.com/

本项目的开发软件：

webstorm2021：关注公众号”青椒工具”，发送”webstorm”获取安装包下载链接；

前端部署之前，要使用build命令进行打包；另外，还要配置request的请求地址。

配置request访问后台地址:

打开/src/plugins/globalRequest.ts文件，对于其中的request相关代码，配置prefix变量；

const request = extend({
  credentials: 'include', // 默认请求是否带上cookie
  // requestType: 'form',
  prefix: process.env.NODE_ENV === 'production' ? 'http://user-backend.66bond.com':undefined
});

当环境变量process.env.NODE_ENV是生产环境时，则后端访问变为http://user-backend.66bond.com。

使用build命令打包：

双击package.json文件，点击运行其中的”build”:”umi build”条目，umi会自动将前端项目打包；打包后的文件都会放在dist目录下；

采用命令行模式(cmd.exe)进入dist目录，运行serve命令，在本地启动前端；

serve命令需要自行安装：npm i -g serve

图8.1前端serve启动

图1 serve启动dist目录中打包后的前端项目

图8.2前端显示生产环境

图2 启动前端显示production环境

图2中之所以显示’production’，原因在于，我们在app.tsx的代码中添加了alert语句：

/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */
export async function getInitialState(): Promise<{
  settings?: Partial<LayoutSettings>;
  currentUser?: API.CurrentUser;
  loading?: boolean;
  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
  alert(process.env.NODE_ENV);

通过这个alert语句来显示当前的环境属性。

图8.3后台访问接口的变化

图3 后端访问接口修改为prefix中的设置

图3中的开发者工具中，可以发现我们的后端request的地址配置生效。

部署到服务器：

删除app.tsx源文件中的语句:

1	alert(process.env.NODE_ENV);

我们再重新build，获取用于部署到服务器的版本。

打开我们的云服务器终端(云服务器的系统为ubuntu20.04)，安装nginx服务器：

1	sudo apt install nginx

前端的域名为: user-front.66bond.com，在云服务器后端完成解析设置；

将dist目录压缩打包，并上传到服务器，解压后放置到/var/www/user目录下。

同时配置nginx的config文件如下：

server {
	listen 80;
	server_name user-front.66bond.com;
	root /var/www/user;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}
}