Linux从安装Nginx到部署前端项目 - HelloWorld开发者社区

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