部署Nginx
部署网关
通过Nginx访问后台网关,然后由网关再将请求转发到具体的微服务,网关会把请求转发到具体的服务
upstream gatewayserver{
server 127.0.0.1:63010 weight=10;
}
# 网站首页对应的虚拟机
server {
listen 80;
server_name www.51xuecheng.cn localhost tjxt-user-t.itheima.net;
// .....................
location /api/ {A
proxy_pass http://gatewayserver/;
}
}
修改前端文件的网关地址
部署教学机构管理页面
upstream uidevserver{
server 127.0.0.1:8601 weight=10;
}
# 教学机构页面对应的虚拟机
server {
listen 80;
server_name teacher.51xuecheng.cn;
#charset koi8-r;
ssi on;
ssi_silent_errors on;
#access_log logs/host.access.log main;
#location / {
# alias D:/itcast2022/xc_edu3.0/code_1/dist/;
# index index.html index.htm;
#}
location / {
proxy_pass http://uidevserver;
}
location /api/ {
proxy_pass http://gatewayserver/;
}
}
部署网站首页
因为页面需要加载一些css、js、图片
等静态资源所以需要借助Nginx访问静态页面,同时对于一些动态资源的请求
也需要由Nginx代理访问防止跨域
第一步: 修改本机(Windows)C:\Windows\System32\drivers\etc
目录下的hosts文件,Centos7操作系统的hosts文件在/etc
目录下
前后端联调
时将前端中原本指向后台网关的地址更改为Nginx的地址
# 输入域名时需要找域名对应的服务器的IP地址,此时会先从host文件中找,如果没有配置请求dns服务器去找
127.0.0.1 www.51xuecheng.cn 51xuecheng.cn ucenter.51xuecheng.cn teacher.51xuecheng.cn file.51xuecheng.cn
第二步: 在nginx.conf
文件中指定前端工程xc-ui-pc-static-portal
所在的路径,修改完配置文件后需要执行命令重新加载Nginx的配置文件
# 重新加载Nginx的配置文件
nginx.exe -s reload
# 网站首页对应的虚拟机
server {
listen 80;
server_name www.51xuecheng.cn localhost;
#rewrite ^(.*) https://$server_name$1 permanent;
#charset koi8-r;
# 引入页头页尾
ssi on;
ssi_silent_errors on;
#access_log logs/host.access.log main;
location / {
# 绝对路径
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/;
index index.html index.htm;
}
# 静态资源,目录以/结尾
location /static/img/ {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/img/;
}
location /static/css/ {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/css/;
}
location /static/js/ {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/js/;
}
location /static/plugins/ {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/plugins/;
add_header Access-Control-Allow-Origin http://ucenter.51xuecheng.cn;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET;
}
location /plugins/ {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/plugins/;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
第三步: 启动Nginx并访问http://www.51xuecheng.cn
查看首页
部署课程详情页面
访问http://www.51xuecheng.cn/course/course_template.html查看课程详情页面,该页面是静态页面还没有使用freemarker
提供的标签
- Nginx监听到静态资源请求
/course/course_template.html
时就会去xc-ui-pc-static-portal\course\
课程目录下找对应的文件
部署文件服务器
在进行课程预览时需要展示在MinIO文件系统存储的课程图片和视频,这里我们可以统一由Nginx代理,然后通过文件服务域名统一访问
第一步: 修改本机(Windows)C:\Windows\System32\drivers\etc
目录下的hosts文件增加文件服务的域名解析
127.0.0.1 file.51xuecheng.cn
第二步: 在nginx.conf
配置文件中配置要代理的文件服务器的地址,配置完毕后重新加载nginx配置文件
# 文件服务
upstream fileserver{
server 127.0.0.1:9000 weight=10;
}
# 增加一个文件服务的虚拟主机,同样监听80端口
server {
listen 80;
server_name file.51xuecheng.cn;
#charset koi8-r;
ssi on;
ssi_silent_errors on;
#access_log logs/host.access.log main;
location /video {
proxy_pass http://fileserver;
}
location /mediafiles {
proxy_pass http://fileserver;
}
}
第三步: 访问http://file.51xuecheng.cn/mediafiles/图片在Minio的存储地址
展示在Minio文件系统中存储的图片
部署播放视频页面
在课程详情页面中点击马上学习
或课程目录下的小节
的名称可以打开对应的视频播放页面learning.html
第一步: 首先在nginx.conf
配置文件中配置视频播放页面的地址,配置完毕后重新加载nginx配置文件
# 网站首页对应的虚拟机
server {
listen 80;
server_name www.51xuecheng.cn localhost;
//....
location /course/preview/learning.html {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/course/learning.html;
}
location /course/search.html {
root D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal;
}
location /course/learning.html {
root D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal;
}
}
第二步: 在learning.html
视频播放页面的videoObject
对象的定义处配置viedo属性指定为我们在Minio文件系统中存储的视频地址
data: {
videServer:'http://file.localhost',
courseId:'',
teachplanId:'',
teachplans:[],
videoObject : {
container: '#vdplay', //容器的ID或className
variable: 'player',//播放函数名称
poster:'/static/img/asset-video.png',//封面图片
//loaded: 'loadedHandler', //当播放器加载后执行的函数
video:'http://file.51xuecheng.cn/video/a/9/a92da96ebcf28dfe194a1e2c393dd860/a92da96ebcf28dfe194a1e2c393dd860.mp4'
// video: [//视频地址列表形式
// ['http://file.xuecheng-plus.com/video/3/a/3a5a861d1c745d05166132c47b44f9e4/3a5a861d1c745d05166132c47b44f9e4.mp4', 'video/mp4', '中文标清', 0]
// ]
},
player : null,
preview:false
}
第三步: 重启Nginx访问localhost/course/preview/learning.html?id=82
观察视频是否可以正常播放,此页面还会请求后台接口获取课程计划暂时不处理