使用vncserver建立遠端管理GCP與內容管理系統建置

用 VNC Server 建立 GCP 遠端桌面

先在 GCP 建立 Compute Engine VM，作業系統選 Ubuntu，再把外部 IP 設為靜態 IP。

開啟 GCP 提供的瀏覽器 Terminal。

安裝必要套件，再執行 vnc4server：

sudo apt-get update && sudo apt-get upgrade

sudo apt-get install ubuntu-desktop gnome-panel gnome-settings-daemon metacity nautilus gnome-terminal

sudo apt-get install vnc4server

vnc4server

修改 ~/.vnc/xstartup

輸入語法： sudo vim .vnc/xstartup

下圖是 Ubuntu 內建的 vim 編輯畫面。

按 I 進入編輯模式，貼上以下四行：

gnome-panel & gnome-settings-daemon & metacity & nautilus &

輸入 :wq 儲存並離開。

vncserver -kill :1

vncserver :1

完成後即可透過 VNC 連線遠端桌面。

GCP 防火牆需要開放 PORT 5901。

安裝 RealVNC Viewer

使用 35.229.134.113:5901 連線。這是建立 VM 時設定的外部靜態 IP。

遠端桌面方便後續查看資料結構或上傳程式。

在 Google Cloud 的 Ubuntu 上用 PostgreSQL、Nginx 與 Gunicorn 建置 Django

前置條件：1. Compute Engine 執行個體已啟動。2. 網域已指向 VM（這裡先用 FreeDNS 的 gcp.mooo.com，申請正式 Domain 後再修改）。3. 若要使用 Cloud DNS，可參考 Google Cloud DNS 設定說明。

回到 GCP Terminal 安裝以下套件。

執行語法：

sudo apt update

sudo apt install python3-pip python3-dev libpq-dev postgresql-contrib nginx curl

在 GCP 的操作介面中找到 SQL，建立 Cloud SQL 執行個體。

Cloud SQL 與 VM 要使用相同區域。

建立完成後，畫面顯示的公開 IP 會用於 Django 站臺連線。

編輯連線設定，只允許 VM 的 IP 連線，填入 GCP 的靜態外部 IP。

資料庫準備好後，接著在 VM 建立 Django 專案。

在 VM 建立 Wagtail CMS 專案

接著安裝並建立內容管理系統。此時 GCP 的主要設定已完成；內容管理系統的試用心得可參考：內容管理系統CMS

流程分成 6 步：1. 建立 Python 虛擬環境。2. 安裝 Django、Gunicorn 與 CodeRed CMS。3. 設定連線字串。4. 執行 python manage.py migrate 初始化。5. 建立 Gunicorn 服務。6. 設定 Nginx。

建立 Python 虛擬環境

執行以下命令安裝虛擬環境：

sudo -H pip3 install --upgrade pip

sudo -H pip3 install virtualenv

建立 WagtailDir 資料夾、虛擬環境，然後切換到該環境：

mkdir ~/WagtailDir

cd ~/WagtailDir

virtualenv WagtailEnv

source WagtailEnv/bin/activate

下圖是建立 Python 虛擬環境後的資料夾。

安裝 Django、Gunicorn 與 CodeRed CMS

執行：

pip install django gunicorn psycopg2-binary

pip install coderedcms

coderedcms start WagtailProject --sitename "網站名稱"

這幾個命令會建立 Django 專案並安裝 CodeRed CMS；可在 VNC Viewer 中查看產生的資料夾。

設定連線字串

連線設定檔位於 /settings/base.py。

欄位名稱可參考 Django 的資料庫連線設定；使用者名稱與密碼沿用前面在 GCP 建立的資料庫帳號。

連上遠端 SQL 後，接下來的命令會建立資料表與 Schema。

執行 python manage.py migrate 初始化

執行語法：

cd WagtailProject python manage.py migrate python manage.py makemigrations python manage.py createsuperuser python manage.py runserver python manage.py collectstatic

看到 http://127.0.0.1:8000，代表 Application Web Server 已在本機啟動。

建立 Gunicorn 服務

建立 Gunicorn 服務，先開啟以下兩個設定檔：sudo vim /etc/systemd/system/gunicorn.socket

sudo vim /etc/systemd/system/gunicorn.service

[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target

[Service]
User=sutsagent
Group=sutsagent
WorkingDirectory=/home/sutsagent/WagtailDir/WagtailProject
ExecStart=/home/sutsagent/WagtailDir/WagtailEnv/bin/gunicorn \
     --access-logfile - \
     --workers 3 \
     --bind unix:/run/gunicorn.sock \
     WagtailProject.wsgi

[Install]
WantedBy=multi-user.target

最後啟動服務、設定開機啟用並檢查狀態。

sudo systemctl start gunicorn.socket
sudo systemctl enable gunicorn.socket
sudo systemctl status gunicorn.socket
file /run/gunicorn.sock
sudo systemctl status gunicorn
curl --unix-socket /run/gunicorn.sock localhost
sudo systemctl status gunicorn
sudo systemctl daemon-reload
sudo systemctl restart gunicorn

設定 Nginx

建立自訂的 Nginx 設定檔；這裡使用 gcp.mooo.com。

sudo vim /etc/nginx/sites-available/gcp.mooo.com

Nginx 設定的重點是讓 server_name 對應 Domain，並設定 location 路徑。

server 
{
    listen 80;
    listen [::]:80;

    server_name gcp.mooo.com www.gcp.mooo.com;

    location = /favicon.ico {
        access_log off;
        log_not_found off;
    }

    location /static/ {
        root /home/sutsagent/WagtailDir/WagtailProject;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}

最後把設定檔連結到啟用網站的目錄：

sudo ln -s /etc/nginx/sites-available/pgcp.mooo.com /etc/nginx/sites-enabled

測試 Nginx 設定後重新啟動：

sudo nginx -t sudo service nginx restart