网站的部署
将我们的前端项目挂载到服务器的 /data
下,在 /data
目录下 clone 仓库的代码,执行打包编译。
配置虚拟主机
虚拟主机,也叫“网站空间”,就是把一台运行在互联网上的物理服务器划分成多个“虚拟”服务器。
端口绑定
修改 Nginx 的配置文件:/usr/local/nginx/conf/nginx.conf
server {
listen 80;
server_name localhost;
location / {
root /data/project/html;
# index index.html;
try_files $uri $uri/ /index.html;
}
}
重启 nginx,浏览器输入项目上前端页面的 IP 就可以看到上传至服务器上的前端项目
域名绑定
做好域名指向后,修改 nginx 配置文件,修改 server_name 为你的域名。
server {
listen 80;
server_name domain_name.com;
location / {
root /data/project/html;
# index index.html;
try_files $uri $uri/ /index.html;
}
}
重启 nginx,浏览器输入项目上前端页面的域名(domain_name.com)就可以看到上传至服务器上的前端项目
注
try_files $uri $uri/ /index.html
:
- 当用户请求 http://localhost/example 时,这里的 $uri 就是 /example。
- try_files 回到硬盘里尝试找这个文件。如果存在名为 /$root/example (其中 $root 是项目代码安装目录) 的文件,就直接把这个文件的内容发送给用户。
- 目录中没有叫 example 的文件。然后就看 $uri/,增加了一个 / ,也就是看有没有名为 /$root/example/ 的目录。
- 如果还找不到,就会到 try_files 的最后一个选项 /index.html,发起一个内部的“子请求”,也就相当于 nginx 发起一个 http 请求到 http://localhost/index.html
同一服务器上部署了多个不同的web应用
通过不同的端口或者不同的地址来代理不同的 web 应用
server {
listen 80;
server_name domain_name.com;
location / {
# 前端项目打包之后的文件目录
root /data/project/html;
# index index.html;
try_files $uri $uri/ /index.html;
}
}
server {
listen 80;
server_name another_domain_name.com;
location / {
root /data/another_project/html;
# index index.html;
try_files $uri $uri/ /index.html;
}
}
server {
listen 81;
server_name another_domain_name.com;
location / {
root /data/another_project/html;
# index index.html;
try_files $uri $uri/ /index.html;
}
}