实现目标

在前端服务器Nginx2上部署前端内容，运行并测试前后端应用系统。

实现环境

• Nginx：前端程序服务器，环境为CentOS7+Nginx。
• Application1：应用服务器，环境为CentOS7+JDK8。

实现步骤

前端程序的运行。

1、查看前端服务器Nginx是否已安装Nginx。Nginx的安装与使用请查看页面右侧“相关阅读”栏目中的文章。

2、在Nginx的默认配置文件目录/etc/nginx/conf.d中新建一个以.conf结尾的前端配置文件，内容如下。

• server_name mobile.test.cn：服务器名称，和域名绑定时需要写域名。本配置文件在使用域名mobile.test.cn访问时生效。
• try_files $uri $uri/ /index.html：当请求的url不存在时，在url后拼接“/”，将url作为目录再次尝试，若仍不存在则将请求转发给index.html。此项配置是为了避免vue项目出现404错误。

3、将编译完成的前端内容拷贝至默认根目录/usr/share/nginx/html。

4、重新启动Nginx服务，使新增的配置文件生效。

前端程序的测试。

1、本地域名解析。在windows文件C:\Windows\System32\drivers\etc\hosts中增加以下配置，将域名mobile.test.cn指向Nginx服务器。

2、通过域名进行访问测试。

2.1、查看列表页，列表页地址为http://mobile.test.cn/。

2.2、点击列表页每条新闻的图片，即可查看每条新闻的详情。

2.3、查看应用服务器Application1的日志输出，每次查看或刷新列表页与详情页都会从MySQL数据库进行数据读取。