前天周六在鄉下的 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;
#
}
#}
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 預設網頁了 :
除了直接在預設網站根目錄 /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/
