Web_Advance
  • 本書簡介
  • Node.js 部分
    • Node 版本管理
    • 使用NPM
      • Yarn
    • 開始Node
    • Worker Thread
    • REPL
    • TCP
    • path
    • Cluster and Child_process
    • assert (自訂拋出的錯誤)
    • Stream(流)
    • util (工具類)
    • EventEmitter
    • fs 文件操作
    • Buffer
      • Binary Diff
      • 查看 Binary 檔案內容
    • Process (進程)
    • 錯誤處理
  • OS
  • Async Hook
  • TCP
  • HTTP
    • 有關爬蟲
    • HTTP/2
    • HTTP Protocal
  • HTTPS
    • HTTPS 流程
    • SSL pinning
    • HTTPS 封包解密
    • 建立自簽發 HTTPS 證書
    • 幫網站加上HTTPS
    • HTTPS原理
  • Crypto加密
  • 有關繼承
  • JS 基本
    • JavaScript 迴圈與異步處理
  • 使用 Express
    • 上傳檔案
    • 圖片伺服器
    • 簡單範例
  • 使用 Nest.js
  • 使用MongoDB
    • 設置帳戶登入權限
    • Mongoose 框架
    • 進階Mongo
    • 基本環境操作
    • MongoDB Sharding
  • 使用MySQL
    • Schema 架構設計
    • SQL 語法
    • SQL Procedure
    • Node.js 操作 MySQL
    • 使用 Sequelize
      • DB Migration
      • function
  • 使用PostgreSQL
    • 常見問題
    • replica
    • 基本指令
    • 使用Node.js操控pg
    • SQL 基礎
  • 使用TypeORM
  • RethinkDB
  • CSS 深度探討
    • Width, Height
  • React
    • 第三方組件
      • Formik
    • styled component
    • propTypes
    • React webpack 部署
    • React util
    • 寫component並且publish
    • create-react-app
    • Context API
    • i18n
    • Server side render
    • Next.js教學
    • Higher order component 與 Recompose
    • component 間 互相存取
    • React hook
  • React router
    • 自己寫一個Router
  • Redux
    • Redux Toolkit
    • 小技巧
    • Redux sagas
    • compose
  • React Native
    • adb
    • InApp Billing
    • Icon
    • SVG
    • Firebase
      • Phone Auth
    • 自動化測試
    • Splash screen
    • Websocket
    • Googla OAuth
      • iOS
      • Android
    • Facebook OAuth
      • iOS
      • Android
    • IOS
    • 第三方組件
      • Auth Code Input
      • Country Code Picker
      • onboarding screen
      • Toast
    • ESlint
    • Push notification
    • Android 上架步驟
    • Expo
    • router
      • react-navigation套件
    • 原生組件
      • RefreshControl
      • Modal
      • Alert
      • button
      • KeyboardAvoidingView
      • Drawer
      • Image
    • 限制螢幕垂直與水平
    • NativeBase UI
    • Debug
    • 常見問題
    • Network
    • 硬體操作
      • 隱藏鍵盤
      • 地理位置
      • 相機與圖片庫存取
    • Async Storage
    • Animation
    • Admob
  • JS 模組化
  • 使用 Webpack
  • 使用 Babel
  • JWT Token
  • ES6 ES7 ES8
    • Array method
    • ES8 Async
    • ES6 Proxy
    • ES6 Object
    • ES6 Arrow function
    • ES6 Promise
    • ES6 Symbol
    • ES6 Generator
    • ES6 Set,Map
    • ES6 Class
  • 模板引擎
    • Mustache
    • Handlebars.js
    • EJS
  • ESLint
  • 部屬到OpenShift
  • OpenStack
  • OAuth
    • Twitter OAuth
    • Google authenticator
    • facebook oauth
      • facebook like ,share
    • google oauth
  • Redis
  • 做一個簡單的markdown editor
  • Websocket
    • WebSocket 相關 Protocol
  • Sublime 安裝套件
  • Google api
    • Cloud Run
    • speech api
    • place autocomplete
    • Geocode
    • Map
      • React map
    • vision api
    • Google-recaptcha
    • Google sheet
  • Instagram API
  • Markdown 與 code pretty js
  • HTML5
    • IntersectionObserver
    • HTML5 audio
    • HTML5 Video 與 WebRTC
      • WebRTC 進階
      • WebEX API
    • HTML5 IndexedDB
  • Google Cloud Platform (GCP)
    • Cloud Storage
    • Cloud storage 串接 Cloud CDN
  • Vim 編輯器
  • 使用nginx
    • config
  • Unix 實用指令
    • 新 VPS 安裝流程
    • Ubuntu 22 安裝
    • Shell Script 教學
  • Git 實用指令
    • Git hook
    • 加上 SSH-key 到 GitHub
    • GPG簽名
  • SSH 實用指令
  • 有關Fetch與axios與跨域請求
  • 圖片上傳相關
    • imgur API
  • JS 格式轉換
  • js trick
  • AWS
    • AWS EBS
    • AWS HTTPS 憑證
    • AWS Cloudfront、ELB、ACL
    • AWS Athena
    • AWS CloudWatch、SNS
    • AWS RDS
    • AWS lambda
      • 範例
      • 加上權限控管
    • AWS S3
    • AWS DynamoDB
      • 結合Lambda
    • 快速把 EC2 串上 AWS Cloudfront CDN
    • AWS 證照相關
  • 有關日期Date
  • VS code 編輯器
    • VSCode 外掛 Plugin
  • CI with Gitlab&Jenkins
  • API 測試
    • Postman
      • 設置 Postman 環境變數
    • API Blueprint
    • swagger
      • 註解寫在Code內生成swagger UI
  • Javascript 實用Lib
  • 遠端寫程式
  • Quicktime錄影注意事項
  • Web開發進階Bug
  • Web壓力測試
  • LineBot
  • PM2部署
  • i18n
  • VPN
  • Protocol Buffers
  • Docker教學
    • LXC LXD
    • Docker Compose
    • Docker 原理
    • Docker 指令
  • E2E Testing
    • Cypress
    • PlayWright
    • Puppeteer 與其他 UI 測試工具
  • Unit Test (Jest & enzyme)
    • React Testing Library
    • mocha
  • Cassandra
    • cluster
  • Distribute Web
    • Dat project
    • IPFS project
  • Cluster and Child_process
  • 打包應用程式
  • Java
    • 使用gradle結合docker
  • Debug 頁面
  • Proxy
  • Chrome extension
  • 消息系統
    • RabbitMQ
  • 金流串接
    • Paypal
    • spgateway智富通
    • Stripe 串接
  • 有關Log
  • 設定 feature flag
  • Azure
    • Face API
    • Image Analyze API
    • Azure Serverless
    • Cosmos DB
      • 使用 SDK
      • 以 RESTful 操作 DB
      • 一致性策略與 DB replicate
  • NodeBB 筆記
  • 瀏覽器快取與緩存(Etag, If-None-Match)
  • 瀏覽器快取與緩存(Expires, Last-modified, Cache-Control)
  • Node.js 第三方模組
    • OpenCV
  • Kubernetes
    • 本地測試 MiniKube
  • Ngrok 使用
  • Telegram MiniAPP 開發
  • Firebase 教學
  • 演算法筆記
  • 圖表
    • Echart
    • TradingView 圖表
    • D3
    • 熱力圖 heatmap
  • 後端緩存 Cache
  • 資料一致性
  • Web 安全機制
    • Cookie 與 LocalStorage
  • Vue
    • Element UI
    • Devtool
    • Vuex
    • Vue router
  • 相關網路協議
    • 網路 IP 基礎
    • Google Search 技巧
    • 網路診斷工具
    • IP
    • DNS
  • GitLab 與 Drone
  • SMTP、POP、IMAP
    • SendGrid
  • IPC
  • 串流服務
    • Twilio
    • Agora
  • 其他資源
  • GraphQL
  • Typescript
  • UI 相關資源
  • FFmpeg
  • Unity 遊戲開發筆記
  • Influx DB
  • Windows 相關
  • DALL·E 3
  • Coap
  • Slack API
  • 資訊安全
    • 破解 ZIP 密碼
Powered by GitBook
On this page
  • 在Linux ubuntu 下的default webpage 路徑為
  • nginx的config 檔案路徑
  • 使用reverse proxy
  • 讓domain.com www.domain.com都導向https
  • 設定靜態目錄
  • websocket有問題
  • 注意事項
  • 配置GZIP
  • 配置Request Limit
  • 配置Load Balance
  • 可能錯誤
  • 讀取index.html
  • 配置優化
  • 注意事項

Was this helpful?

Edit on GitHub

使用nginx

PreviousVim 編輯器Nextconfig

Last updated 2 years ago

Was this helpful?

可參考此篇安裝

重啟指令

sudo nginx -s stop && sudo nginx

在Linux ubuntu 下的default webpage 路徑為

var/www/html

或

/usr/share/nginx/html

nginx的config 檔案路徑

會先經過 nginx.conf 之後才會去 sites-available/default

/etc/nginx/nginx.conf 
/etc/nginx/sites-available/default

使用reverse proxy

location / {
    proxy_pass http://localhost:3000;
  }

讓domain.com www.domain.com都導向https

完整範例:

server {        
  listen 80;        
  server_name test.com  www.test.com;
  rewrite ^/(.*) https://test.com/$1 permanent;
}
server {        
  server_name test.com;
  listen 443;
  ssl on;
  ssl_certificate  /usr/share/nginx/sslcrt/bundle.crt;        
  ssl_certificate_key /usr/share/nginx/sslcrt/private.key;     
  location / {          
    proxy_pass http://localhost:3000;      
  }}

設定靜態目錄

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /home/test/getuserInfo/front-end/build;

        index index.html index.htm index.nginx-debian.html; # 預設會先連到這些檔案

        server_name _;
}

websocket有問題

加入以下配置

location / {
  ...
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_set_header Host $host;
}

注意事項

使用AWS或其他VPS記得開防火牆的inbound記得開443PORT

有關使用cloudflare與nginx配置之SSL可參考web_Basic之cloudflare章節

配置GZIP

配置Request Limit

EX:

limit_req_zone $binary_remote_addr zone=req_zone:10m rate=5r/s;
server {
        listen 443;
        server_name api.example.com;
        gzip on;
        ssl on;
        ssl_certificate sites-available/c.pem;
        ssl_certificate_key sites-available/c.key;
        underscores_in_headers on;
        location / {
                limit_req zone=req_zone burst=10 nodelay;
                proxy_pass http://localhost:3001;
        }
}

記得要加上 burst (幾秒內的容許值) 與 nodelay (同時發送請求時一起執行),不然會使用平均秒數法自動幫你計算,只發兩個請求卻超過上面設置的 5r/s,產生 Nginx 503 error。

 limit_req zone=.. burst=5 nodelay;

配置Load Balance

http { 
  upstream cluster { 
      server 127.0.0.1:3000; 
      server 127.0.0.1:3001; 
      server 127.0.0.1:3002; 
      server 127.0.0.1:3003; 
  } 
  server { 
       listen 80; 
       server_name www.domain.com; 
       location / { 
            proxy_pass http://cluster;
       } 
  }
}

可能錯誤

解決方法

 ps -ef |grep nginx
   會顯示如下
    www-data 16751     1  0 Jun19 ?        00:00:07 nginx: worker process

 然後

  sudo kill -9 16751


  重啟


  sudo nginx

EXAMPLE 1: (WEB)

server {
 listen 80;
  server_name sakatu.com;
  rewrite ^/(.*) https://rent.sakatu.com/$1 permanent;
}
server {
  listen 80;
  server_name rent.sakatu.com;
  rewrite ^/(.*) https://rent.sakatu.com/$1 permanent;
}
server {
  listen 80;
  server_name www.sakatu.com;
  rewrite ^/(.*) https://sakatu.com permanent;
}

server {
  server_name rent.sakatu.com;
  listen 443;
  root /home/ubuntu/sharehandi_web/build;
  gzip on;
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_http_version 1.1;
  gzip_min_length 256;
  gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
  include /etc/nginx/mime.types;
 ssl on;
 ssl_certificate /usr/share/nginx/sslcrt/cert.pem;
 ssl_certificate_key /usr/share/nginx/sslcrt/private.key;

  location / {
    try_files $uri  /index.html;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
  }
  location /google7d69523ad2a54000.html{
   try_files /../../googlesearch/google7d69523ad2a54000.html /test.html;
  }
    location /sitemap.txt {
   try_files /../../sitemap.txt /test.html;
  }
}


server {
 listen 443;
 server_name chat.sakatu.com;
 location / {
  proxy_pass http://localhost:3005;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_set_header Host $host;
 }
}

EXAMPLE 2: (API)

limit_req_zone $binary_remote_addr zone=req_zone:10m rate=5r/s;
server {
        listen 443;
        server_name api.sakatu.com;
        gzip on;
        ssl on;
        ssl_certificate sites-available/c.pem;
        ssl_certificate_key sites-available/c.key;
        underscores_in_headers on;
        location / {
               limit_req zone=req_zone burst=10 nodelay;
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                proxy_pass http://localhost:3001;
        }
}

讀取index.html

server {
  listen 80 default;
  root /home/yichengww/build;
  location / {
    try_files $uri /index.html;
  }
}

記得root不可寫~

配置優化

優化 production 部署的 server 效率

注意事項

1.有時如果以下指令出現"nginx.pid" failed

nginx -s reload

可替換為

sudo service nginx restart

2.nginx: [emerg] open() "/usr/local/Cellar/nginx/1.15.0/logs/error.log" failed (2: No such file or directory)

可以創建一個error.log檔案即可

mkdir /usr/local/Cellar/nginx/1.15.0/logs && echo > error.log

3.nginx: [emerg] bind() to 0.0.0.0:82 failed (13: Permission denied)

使用sudo nginx 即可

設置可參考一篇不錯的文章

1.

http://blog.hellojcc.tw/2015/12/07/nginx-beginner-tutorial/
https://stackoverflow.com/a/43644053/4622645
https://www.linode.com/docs/websites/nginx/how-to-configure-nginx#start-stop-reload
https://www.digitalocean.com/community/tutorials/how-to-add-the-gzip-module-to-nginx-on-ubuntu-14-04
http://www.cnblogs.com/zfying/archive/2012/07/07/2580876.html
https://www.nginx.com/blog/rate-limiting-nginx/
Nginx fails to stop and nginx.pid is missing
https://imququ.com/post/my-nginx-conf-for-wpo.html