自己写项目总归是要给人看的，对于测试或者上线最终都是要部署到服务器的，本文就是记录前端项目如何部署到nginx服务器
Linux安装Nginx （傻瓜式）
CentOS7中使用yum安装Nginx的方法
配置静态服务器
ps: 如果可以的话推荐分离配置
include /etc/nginx/conf.d/*.conf;
Vue等相关工程话项目可直接将build后的文件上传即可
创建静态资源目录（用户存放项目）
mkdir /www
FTP上传项目到 /www 目录
我是使用
filezilla进行的SFTP链接，连接成功后选中/www目录然后将文件上传到该目录即可
查看nginx配置文件地址
nginx -t
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# /etc/nginx/nginx.conf
配置静态服务器
vi /etc/nginx/nginx.conf
# 找到http{...}
# 在http{}打括号中插入
# 如：
http{
# 其他代码（原来就存在的代码）
server {
listen 80; # 端口 需要服务器开放端口
# 域名绑定需要将域名解析A记录到改服务器ip
server_name music.ncgame.cc; # 你的域名 如果需要ip访问请注释该行并改变端口
location / { # 监听的路径
root /www; # /www 就是刚刚创建的目录
index index.html index.htm; # 默认入口
}
}
}
重启nginx
# 测试配置文件是否可用
# 显示成功 `test is successful` 即可执行下方命令，失败请查看具体原因
nginx -t
# 修改配置后重新加载生效
nginx -s reload
# 重新打开日志文件
nginx -s reopen
访问
域名绑定需要将域名解析A记录到改服务器ip绑定后直接访问改域名
通过端口绑定的请直接ip:端口即可（但是需要服务器开放端口）
配置node项目绑定域名
一般是通过nginx代理实现绑定域名
配置：
server {
listen 80; # 端口
server_name blog.ncgame.cc; # 域名
location / {
proxy_pass http://0.0.0.0:3000;
proxy_read_timeout 18000; # 设置超时
}
}
HTTPS（SSL）配置
server {
listen 443 ssl; # 端口
server_name blog.ncgame.cc; # 域名
ssl_certificate /path/xxx.pem # 证书路径 pem or crt;
ssl_certificate_key /path/xxx.key; # 私钥
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
# 这里可以配置静态服务器 or 代理
}
}
# http 自动跳转到 https
server{
listen 80;
server_name blog.ncgame.cc;
rewrite ^/(.*)$ https://blog.ncgame.cc:443/$1 permanent;
}
其他
Vue 访问后刷新空白的问题
可能是由于VurRouter开启了HTML5 History 模式具体可查看VurRouter后端配置例子
需要在配置中添加一行 try_files $uri $uri/ /index.html;
例：
server {
listen 80; # 端口 需要服务器开放端口
# 域名绑定需要将域名解析A记录到改服务器ip
server_name music.ncgame.cc; # 你的域名 如果需要ip访问请注释该行并改变端口
location / { # 监听的路径
root /www; # /www 就是刚刚创建的目录
index index.html index.htm; # 默认入口
try_files $uri $uri/ /index.html;
}
}
