Linux从安装Nginx到部署前端项目

自己写项目总归是要给人看的，对于测试或者上线最终都是要部署到服务器的，本文就是记录前端项目如何部署到

nginx

Linux安装Nginx （傻瓜式）

CentOS7

中使用

yum

安装

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 模式

需要在配置中添加一行

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;
}
}