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 模式具體可查看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;
    }
}
複製代碼