2019年4月1日 星期一

在樹莓派 Raspbian Stretch 上安裝 Nginx 伺服器

前天周六在鄉下的 Pi 3 上安裝 Nginx 伺服器沒有成功, 參考 :

# 樹莓派安裝 Nginx 伺服器失敗

我懷疑是 Raspbian Jessie 太舊了 (那是 2017 年的版本), 因此週六晚上回高雄後, 在另一台 Pi 3 就順利安裝成功了, 這是 2018-11 的 Stretch 版本.

以下測試參考了下面幾篇文章 :

# Raspberry Pi 的實作 - 用 Nginx 架設網頁伺服器
# 瞧你賊西西的-nginx 基礎設定教學
# 啟用 Nginx Status 的設定
# 使用uWSGI和nginx来设置Django和你的web服务器
# 树莓派组建web服务器django,uwsgi,nginx,php,python,sqlite
# Setting up an NGINX web server on a Raspberry Pi


1. 安裝 Nginx : 

pi@raspberrypi:~ $ sudo apt-get install nginx
正在讀取套件清單... 完成
正在重建相依關係       
正在讀取狀態資料... 完成
The following packages were automatically installed and are no longer required:
  libqt5qml5 libqt5quick5 libqt5webkit5 ncurses-term openssh-sftp-server
  qml-module-qtgraphicaleffects qml-module-qtquick-controls
  qml-module-qtquick-dialogs qml-module-qtquick-layouts
  qml-module-qtquick-privatewidgets qml-module-qtquick-window2
  qml-module-qtquick2
Use 'sudo apt autoremove' to remove them.
下列的額外套件將被安裝：
  libnginx-mod-http-auth-pam libnginx-mod-http-dav-ext libnginx-mod-http-echo
  libnginx-mod-http-geoip libnginx-mod-http-image-filter
  libnginx-mod-http-subs-filter libnginx-mod-http-upstream-fair
  libnginx-mod-http-xslt-filter libnginx-mod-mail libnginx-mod-stream
  nginx-common nginx-full
建議套件：
  fcgiwrap nginx-doc ssl-cert
下列【新】套件將會被安裝：
  libnginx-mod-http-auth-pam libnginx-mod-http-dav-ext libnginx-mod-http-echo
  libnginx-mod-http-geoip libnginx-mod-http-image-filter
  libnginx-mod-http-subs-filter libnginx-mod-http-upstream-fair
  libnginx-mod-http-xslt-filter libnginx-mod-mail libnginx-mod-stream nginx
  nginx-common nginx-full
升級 0 個，新安裝 13 個，移除 0 個，有 0 個未被升級。
需要下載 1,505 kB 的套件檔。
此操作完成之後，會多佔用 2,563 kB 的磁碟空間。
是否繼續進行 [Y/n]？ [Y/n] Y
下載:1 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf nginx-common all 1.10.3-1+deb9u2 [105 kB]
下載:2 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libnginx-mod-http-auth-pam armhf 1.10.3-1+deb9u2 [85.6 kB]
下載:3 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libnginx-mod-http-dav-ext armhf 1.10.3-1+deb9u2 [87.3 kB]
下載:4 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libnginx-mod-http-echo armhf 1.10.3-1+deb9u2 [95.3 kB]
下載:5 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libnginx-mod-http-geoip armhf 1.10.3-1+deb9u2 [86.8 kB]
下載:6 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libnginx-mod-http-image-filter armhf 1.10.3-1+deb9u2 [89.5 kB]
下載:7 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libnginx-mod-http-subs-filter armhf 1.10.3-1+deb9u2 [88.7 kB]
下載:8 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libnginx-mod-http-upstream-fair armhf 1.10.3-1+deb9u2 [88.9 kB]
下載:9 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libnginx-mod-http-xslt-filter armhf 1.10.3-1+deb9u2 [88.3 kB]
下載:10 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libnginx-mod-mail armhf 1.10.3-1+deb9u2 [113 kB]
下載:11 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libnginx-mod-stream armhf 1.10.3-1+deb9u2 [106 kB]
下載:12 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf nginx-full armhf 1.10.3-1+deb9u2 [389 kB]
下載:13 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf nginx all 1.10.3-1+deb9u2 [81.8 kB]
取得 1,505 kB 用了 1min 9s (21.7 kB/s)                                       
正在預先設定套件 ...
選取了原先未選的套件 nginx-common。
（讀取資料庫 ... 目前共安裝了 133472 個檔案和目錄。）
Preparing to unpack .../00-nginx-common_1.10.3-1+deb9u2_all.deb ...
Unpacking nginx-common (1.10.3-1+deb9u2) ...
選取了原先未選的套件 libnginx-mod-http-auth-pam。
Preparing to unpack .../01-libnginx-mod-http-auth-pam_1.10.3-1+deb9u2_armhf.deb ...
Unpacking libnginx-mod-http-auth-pam (1.10.3-1+deb9u2) ...
選取了原先未選的套件 libnginx-mod-http-dav-ext。
Preparing to unpack .../02-libnginx-mod-http-dav-ext_1.10.3-1+deb9u2_armhf.deb ...
Unpacking libnginx-mod-http-dav-ext (1.10.3-1+deb9u2) ...
選取了原先未選的套件 libnginx-mod-http-echo。
Preparing to unpack .../03-libnginx-mod-http-echo_1.10.3-1+deb9u2_armhf.deb ...
Unpacking libnginx-mod-http-echo (1.10.3-1+deb9u2) ...
選取了原先未選的套件 libnginx-mod-http-geoip。
Preparing to unpack .../04-libnginx-mod-http-geoip_1.10.3-1+deb9u2_armhf.deb ...
Unpacking libnginx-mod-http-geoip (1.10.3-1+deb9u2) ...
選取了原先未選的套件 libnginx-mod-http-image-filter。
Preparing to unpack .../05-libnginx-mod-http-image-filter_1.10.3-1+deb9u2_armhf.deb ...
Unpacking libnginx-mod-http-image-filter (1.10.3-1+deb9u2) ...
選取了原先未選的套件 libnginx-mod-http-subs-filter。
Preparing to unpack .../06-libnginx-mod-http-subs-filter_1.10.3-1+deb9u2_armhf.deb ...
Unpacking libnginx-mod-http-subs-filter (1.10.3-1+deb9u2) ...
選取了原先未選的套件 libnginx-mod-http-upstream-fair。
Preparing to unpack .../07-libnginx-mod-http-upstream-fair_1.10.3-1+deb9u2_armhf.deb ...
Unpacking libnginx-mod-http-upstream-fair (1.10.3-1+deb9u2) ...
選取了原先未選的套件 libnginx-mod-http-xslt-filter。
Preparing to unpack .../08-libnginx-mod-http-xslt-filter_1.10.3-1+deb9u2_armhf.deb ...
Unpacking libnginx-mod-http-xslt-filter (1.10.3-1+deb9u2) ...
選取了原先未選的套件 libnginx-mod-mail。
Preparing to unpack .../09-libnginx-mod-mail_1.10.3-1+deb9u2_armhf.deb ...
Unpacking libnginx-mod-mail (1.10.3-1+deb9u2) ...
選取了原先未選的套件 libnginx-mod-stream。
Preparing to unpack .../10-libnginx-mod-stream_1.10.3-1+deb9u2_armhf.deb ...
Unpacking libnginx-mod-stream (1.10.3-1+deb9u2) ...
選取了原先未選的套件 nginx-full。
Preparing to unpack .../11-nginx-full_1.10.3-1+deb9u2_armhf.deb ...
Unpacking nginx-full (1.10.3-1+deb9u2) ...
選取了原先未選的套件 nginx。
Preparing to unpack .../12-nginx_1.10.3-1+deb9u2_all.deb ...
Unpacking nginx (1.10.3-1+deb9u2) ...
設定 nginx-common (1.10.3-1+deb9u2) ...
Created symlink /etc/systemd/system/multi-user.target.wants/nginx.service → /lib/systemd/system/nginx.service.
設定 libnginx-mod-http-image-filter (1.10.3-1+deb9u2) ...
設定 libnginx-mod-http-subs-filter (1.10.3-1+deb9u2) ...
Processing triggers for systemd (232-25+deb9u6) ...
設定 libnginx-mod-http-auth-pam (1.10.3-1+deb9u2) ...
設定 libnginx-mod-http-dav-ext (1.10.3-1+deb9u2) ...
設定 libnginx-mod-mail (1.10.3-1+deb9u2) ...
Processing triggers for man-db (2.7.6.1-2) ...
設定 libnginx-mod-http-xslt-filter (1.10.3-1+deb9u2) ...
設定 libnginx-mod-http-upstream-fair (1.10.3-1+deb9u2) ...
設定 libnginx-mod-http-geoip (1.10.3-1+deb9u2) ...
設定 libnginx-mod-stream (1.10.3-1+deb9u2) ...
設定 libnginx-mod-http-echo (1.10.3-1+deb9u2) ...
設定 nginx-full (1.10.3-1+deb9u2) ...
設定 nginx (1.10.3-1+deb9u2) ...

查詢 Dabian 版本果確實是 9 版 :

pi@raspberrypi:~ $ cat /etc/debian_version   
9.4
Jessie 的 8 版可能真的太舊了, 與目前的 Nginx 不速配.

Nginx 安裝完成後會自動加入 /etc/ini.d/ 目錄下, 亦即重開機後會自動啟動 :




i@raspberrypi:~ $ ls /etc/init.d/ 
alsa-utils        dhcpcd             lightdm     plymouth-log  ssh
avahi-daemon      dphys-swapfile     networking  procps        sudo
bluetooth         fake-hwclock       nfs-common  raspi-config  triggerhappy
console-setup.sh  hwclock.sh         nginx       rpcbind       udev
cron              keyboard-setup.sh  paxctld     rsync         x11-common
dbus              kmod               plymouth    rsyslog



2. 啟動伺服器連線預設網頁 :

Nginx 安裝完成後正常來說會自動啟動伺服器, 若沒有可用下列指令啟動 :

pi@raspberrypi:~ $ sudo service nginx restart

這時開啟樹莓派瀏覽器連線 localhost 應該要能顯示預設網頁 :




此網頁放在 /var/www/html 下, 安裝伺服器時, Nginx 會在此目錄下建立一個 index.nginx-debian.html 檔案 :

pi@raspberrypi:~ $ ls /var/www/html
index.nginx-debian.html   
pi@raspberrypi:~ $ cat /var/www/html/index.nginx-debian.html   
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

Nginx 伺服器的操作指令如下表 : 

 Nginx 伺服器操作指令 說明
 sudo service nginx start 啟動伺服器
 sudo service nginx stop 停止伺服器
 sudo service nginx status 檢視伺服器狀態
 sudo service nginx restart 重啟伺服器

或者 :

 Nginx 伺服器操作指令 說明
 nginx -s start 啟動伺服器
 nginx -s stop 停止伺服器
 nginx -t 檢視伺服器狀態
 nginx -s reload 重啟伺服器

參考 :

# https://gist.github.com/jackyu/6379418

pi@raspberrypi:~ $ sudo service nginx start   
pi@raspberrypi:~ $ sudo service nginx stop
pi@raspberrypi:~ $ sudo service nginx restart
pi@raspberrypi:~ $ sudo service nginx status 

● nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Sun 2019-03-31 18:21:58 CST; 12s ago
     Docs: man:nginx(8)
  Process: 5222 ExecStop=/sbin/start-stop-daemon --quiet --stop --retry QUIT/5 --pidfile /run/ngin
  Process: 5242 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/
  Process: 5239 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, 
 Main PID: 5243 (nginx)
   CGroup: /system.slice/nginx.service
           ├─5243 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
           ├─5244 nginx: worker process
           ├─5245 nginx: worker process
           ├─5246 nginx: worker process
           └─5247 nginx: worker process

 3月 31 18:21:58 raspberrypi systemd[1]: Starting A high performance web server and a reverse proxy
 3月 31 18:21:58 raspberrypi systemd[1]: Started A high performance web server and a reverse proxy 
lines 1-17/17 (END)


3. Nginx 設定檔 :

Nginx 伺服器的設定檔放在 /etc/nginx 下 :

pi@raspberrypi:~ $ ls /etc/nginx/ 
conf.d          koi-win            nginx.conf       sites-enabled
fastcgi.conf    mime.types         proxy_params     snippets
fastcgi_params  modules-available  scgi_params      uwsgi_params
koi-utf         modules-enabled    sites-available  win-utf

其中 nginx.conf  是主設定檔, sites-enabled 資料夾用來存放已啟用站台之設定檔, 而 sites-available 資料夾則是存放尚未啟用之站台設定檔.

Nginx 的主設定檔 /etc/nginx/nginx.conf 是全域的, 亦即會套用到 Nginx 底下架設的全部網站, 其預設內容如下 :

pi@raspberrypi:~ $ cat /etc/nginx/nginx.conf
user www-data;
worker_processes auto;     # Nginx 處理器數目
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
worker_connections 768;     # 每個程序之最大連接數
# multi_accept on;
}

http {

##
# Basic Settings
##

sendfile on;            #是否允許檔案上傳
tcp_nopush on;      # 防止壅塞
tcp_nodelay on;     # 防止壅塞
keepalive_timeout 65;                  # 用戶連線最長秒數
types_hash_max_size 2048;         # 雜湊表大小, 越大路由越快
# server_tokens off;

# server_names_hash_bucket_size 64;
# server_name_in_redirect off;

include /etc/nginx/mime.types;
default_type application/octet-stream;

##
# SSL Settings
##

ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;

##
# Logging Settings
##

access_log /var/log/nginx/access.log;     #存取記錄檔位置
error_log /var/log/nginx/error.log;          #錯誤記錄檔位置

##
# Gzip Settings
##

gzip on;
gzip_disable "msie6";

# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

##
# Virtual Host Configs
##

include /etc/nginx/conf.d/*.conf;       # 載入系統設定檔
include /etc/nginx/sites-enabled/*;    # 載入已啟用網站設定檔
}


#mail {
# # See sample authentication script at:
# # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
# # auth_http localhost/auth.php;
# # pop3_capabilities "TOP" "USER";
# # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
# server {
# listen     localhost:110;
# protocol   pop3;
# proxy      on;
# }
#
# server {
# listen     localhost:143;
# protocol   imap;
# proxy      on;
# }
#}

基本上都不需要更改, 我會用到的大概是 keepalive_timeout, 主要是應付網路爬蟲程式需等待主機撈資料的等待時間, 以前在虛擬主機我都設 120 秒. 下面這篇文章對如何設定以達到 Nginx 最大效能有詳細說明 :

# How to properly host Flask application with Nginx and Guincorn

每次啟動伺服器時, 都會從 /etc/nginx/conf.d/ 載入所有 .conf 設定檔, 並從 /etc/nginx/sites-enabled/ 下載入所有站台設定檔. 

Nginx 伺服器的所有站台設定檔放在 /etc/nginx/sites-enabled/ 目錄下, 預設只有一個檔案 default :

pi@raspberrypi:~ $ ls /etc/nginx/sites-enabled
default 
pi@raspberrypi:~ $ cat /etc/nginx/sites-enabled/default  
##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# https://www.nginx.com/resources/wiki/start/
# https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/
# https://wiki.debian.org/Nginx/DirectoryStructure
#
# In most cases, administrators will remove this file from sites-enabled/ and
# leave it as reference inside of sites-available where it will continue to be
# updated by the nginx packaging team.
#
# This file will automatically load configuration files provided by other
# applications, such as Drupal or Wordpress. These applications will be made
# available underneath a path with that package name, such as /drupal8.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##

# Default server configuration
#
server {
listen 80 default_server;           # 監聽 80 埠
listen [::]:80 default_server;

# SSL configuration
#
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server;
#
# Note: You should disable gzip for SSL traffic.
# See: https://bugs.debian.org/773332
#
# Read up on ssl_ciphers to ensure a secure configuration.
# See: https://bugs.debian.org/765782
#
# Self signed certs generated by the ssl-cert package
# Don't use them in a production server!
#
# include snippets/snakeoil.conf;

root /var/www/html;      # 預設站台之根目錄絕對路徑

# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;   #預設首頁檔名

server_name _;      # 網站域名, 例如 tw.yahoo.com (_ 表示 localhost)

location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}

# pass PHP scripts to FastCGI server
#
#location ~ \.php$ {
# include snippets/fastcgi-php.conf;
#
# # With php-fpm (or other unix sockets):
# fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
# # With php-cgi (or other tcp sockets):
# fastcgi_pass 127.0.0.1:9000;
#}

# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
# listen 80;
# listen [::]:80;
#
# server_name example.com;
#
# root /var/www/example.com;
# index index.html;
#
# location / {
# try_files $uri $uri/ =404;
# }
#}

Nginx 底下可建立多個站台, 每一個站台都用一個 server {} 來設定, 上面就是預設網站之設定, 使用如下設定指令 (directive) :

 設定指令 說明
 listen 設定監聽埠, 預設為 80 埠 (www)
 root 設定預設站台之根目錄絕對路徑, 預設為 /var/www/html/
 index 列舉首頁檔名
 server_name 設定伺服器名稱, 預設為 _
 location 設定請求處理方式

注意, 首頁是按照 index 中列舉之順序尋找的, 因此若網站習慣用 index.htm 當首頁, 最好將 index.htm 排在 index.html 前面, 可添加 index.php 或 index.py 等. 請求處理方式 location 首先將 $url 視為檔案, 其次將其視為目錄, 如果都不存在則回應 404.

另外, 不論是系統設定檔或站台設定檔, 只要有更改內容都要重新啟動伺服器才會生效.


4. 自訂預設網站首頁 : 

我們可直接在預設根目錄下添加自己的 index.htm 來取代預設的 index.nginx-debian.html. 例如可在根目錄 /var/www/html 下用 nano 編輯一個 index.htm 在瀏覽器上顯示首頁內容為 "Hello World!" :

pi@raspberrypi:~ $ sudo nano /var/www/html/index.htm
pi@raspberrypi:~ $ cat /var/www/html/index.htm 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MyWeb</title>
  </head>
  <body>
    <b>Hello World!</b>
  </body>
</html>
pi@raspberrypi:~ $ ls /var/www/html 
index.htm  index.nginx-debian.html     

這時再開啟瀏覽器連線 127.0.0.1 或樹莓派本身 IP (我都設定為 STATIC 192.168.2.192) 就會顯示 "Hello World" 網頁而非 Nginx 預設網頁了 :




5. 虛擬目錄 :

除了直接在預設網站根目錄 /var/www/html 下儲存網頁外, 也可以使用虛擬目錄, 將網頁儲存在其他目錄例如 /var/www/test 下, 仍然使用預設網站的 DNS 加上虛擬目錄存取, 例如 127.0.0.1/test.

首先在 /var/www 下建立一個資料夾 test, 並用 Nano 在虛擬目錄 /var/www/test/ 下編輯首頁檔 index.htm :

pi@raspberrypi:~ $ sudo mkdir /var/www/test
pi@raspberrypi:~ $ sudo nano /var/www/test/index.htm 
pi@raspberrypi:~ $ cat /var/www/test/index.htm 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MyWeb</title>
  </head>
  <body>
    <b>Virtual directory : /var/www/test</b>
  </body>
</html>

然後用 Nano 編輯預設站台的設定檔 /etc/nginx/sites-enabled/default :

pi@raspberrypi:~ $ sudo nano /etc/nginx/sites-enabled/default 

在 location ~ /\.ht 底下加入虛擬目錄的 location {} 段落, 將 /test 路徑對應到目錄 /var/www/test :

  location ~ /\.ht {
    deny all;
  }

  location /test {      # 虛擬目錄添加的部分 
    index index.html index.htm;   
    alias /var/www/test; 
  }

按 Ctrl+O 存檔後按 Ctrl+X 跳出 Nano, 因有修改設定檔, 故需重啟伺服器 :

pi@raspberrypi:~ $ sudo service nginx restart   

開啟瀏覽器連線 127.0.0.1/test 或 192.168.2.192/test 應該顯示如下網頁 :




最後我在虛擬目錄下編輯了一個 jQuery UI 測試網頁 jqtest.htm 如下, 這是一個 Slider 滑桿製作的調色盤, 且可以用下拉式選單選擇主題布景 :

pi@raspberrypi:~ $ sudo nano /var/www/test/jqtest.htm
pi@raspberrypi:~ $ cat /var/www/test/jqtest.htm 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link id="theme" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size:10px;
        }
    </style>
  </head>
  <body>
    <select id="themes">
      <option value="base">base</option>
      <option value="black-tie">black-tie</option>
      <option value="blitzer">blitzer</option>
      <option value="cupertino">cupertino</option>
      <option value="dark-hive">dark-hive</option>
      <option value="dot-luv">dot-luv</option>
      <option value="eggplant">eggplant</option>
      <option value="excite-bike">excite-bike</option>
      <option value="flick">flick</option>
      <option value="hot-sneaks">hot-sneaks</option>
      <option value="humanity">humanity</option>
      <option value="le-frog">le-frog</option>
      <option value="mint-choc">mint-choc</option>
      <option value="overcast">overcast</option>
      <option value="pepper-grinder">pepper-grinder</option>
      <option value="redmond">redmond</option>
      <option value="smoothness">smoothness</option>
      <option value="south-street">south-street</option>
      <option value="start">start</option>
      <option value="sunny">sunny</option>
      <option value="swanky-purse">swanky-purse</option>
      <option value="trontastic">trontastic</option>
      <option value="ui-darkness">ui-darkness</option>
      <option value="ui-lightness">ui-lightness</option>
      <option value="vader">vader</option>
    </select><br>
    R <div id="red" style="width:200px;"></div><br>
    G <div id="green" style="width:200px;"></div><br>
    B <div id="blue" style="width:200px;"></div><br>
    <div id="canvas" style="width:200px;height:100px;border-style:solid;">
    </div>
  </body>
  <script>
    $(document).ready(function(){
      $("#themes").selectmenu();
      $("#themes").val("hot-sneaks");
      $("#themes").selectmenu("refresh");
      $('#themes').on('selectmenuchange', function() {
        var theme=$(this).val();
        var href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/" +
                 theme + "/jquery-ui.css";
        $("#theme").attr("href", href);
        });
      var create=function(e, ui) {
        var style={"width":"25px","text-align":"center"};
        $(this).find(".ui-slider-handle").css(style);
        };
      var slide=function(e, ui) {
        $(this).find(".ui-state-focus").html(ui.value);
        var r=$("#red").slider("value");
        var g=$("#green").slider("value");
        var b=$("#blue").slider("value");
        var bgcolor="rgb(" + r + "," + g + "," + b + ")";
        $("#canvas").css("background-color", bgcolor);
        };
      var config={min: 0, max: 255, create: create, slide: slide};
      $("#red").slider(config);
      $("#green").slider(config);
      $("#blue").slider(config);
      });
  </script>
</html>
pi@raspberrypi:~ $

以瀏覽器連線 127.0.0.1/test/jqtest.htm 顯示如下網頁 : 




可見 jQuery UI 在樹莓派上一樣可正常運作.

另外 Nginx 也可以設定虛擬站台, 但需要設定 DNS 伺服器, 這部分其實我還不懂怎麼做, 而且目前也還用不到, 等有空再來研究.


2019-04-01 補充 :

我在 "瞧你賊西西的-nginx 基礎設定教學" 這篇找到如何修改 DNS 對應的方法了, 原來是要修改 /etc/hosts 這個系統檔, 目前的設定是 :

pi@raspberrypi:~ $ cat /etc/hosts   
127.0.0.1 localhost
::1 localhost ip6-localhost ip6-loopback
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

127.0.1.1 raspberrypi

原來在網址列打 localhost 就能連線到 127.0.0.1 的設定是在這裡.


6. 虛擬站台 : 

在上面的虛擬目錄測試中已經建立了一個目錄 /var/www/test, 並在底下編輯了兩個網頁檔 index.htm 與 jqtest.htm. 建立虛擬站台的第一步算是已完成了.

第二步是到 /etc/nginx/sites-enabled/ 底下編輯一個網站設定檔, 設定一個虛擬站台 test.com 對應到資料夾 /var/www/test 如下 :

pi@raspberrypi:~ $ sudo nano /etc/nginx/sites-enabled/test.conf 
pi@raspberrypi:~ $ cat /etc/nginx/sites-enabled/test.conf
server {
listen 80;
listen [::]:80;

server_name test.com; 
root /var/www/test;

index index.html;
location / {
try_files $uri $uri/ =404;
}
}

第三步是編輯 /etc/hosts 系統檔, 增加一筆 test.com 對應到 127.0.0.1 這個與 localhost 相同的 IP :

pi@raspberrypi:~ $ sudo nano /etc/hosts 
pi@raspberrypi:~ $ cat /etc/hosts 
127.0.0.1 localhost
127.0.0.1       test.com 
::1 localhost ip6-localhost ip6-loopback
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

127.0.1.1 raspberrypi

完成虛擬站台設定後必須重啟伺服器 :

pi@raspberrypi:~ $ sudo service nginx restart

然後在瀏覽器連線 test.com/jqtest.htm 就會回應網頁了 :




OK, 大功告成 !

參考 :

# https://www.cyberciti.biz/faq/nginx-restart-ubuntu-linux-command/

張貼者： 於
標籤： , ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )