:::success
# 📋 目錄
1. [建立專案目錄](#建立專案目錄)
2. [產生專案](#產生專案)
3. [寫一個 Service 組態檔](#寫一個-Service-組態檔)
4. [設定 nginx 服務](#設定-nginx-服務)
:::
# 建立專案目錄
在 Linux 系統中可以看到整個根目錄預設為這個樣子：


我們要在這個根目錄下建立我們的專案目錄：

根目錄
└ your-project-name
  └ log #（這邊放日誌）
  └ service #（這邊放後端服務）
  │ └ springboot.jar
  └ www #（這邊放前端網頁）
    └ angular.dist

所以實作的部分看下面這裡！由於我們使用的是 [Google Cloud Platform](https://console.cloud.google.com/) 架設虛擬機，一般我們也都使用Linux 的作業系統，所以下面的指令都會以 linux command 呈現。

ssh -i ~/.ssh/your-private-key [e-mail] #登入虛擬機
cd ../.. #到根目錄
sudo mkdir /your-project-name #新增一個目錄
sudo mkdir /your-project-name/log #新增log目錄
sudo mkdir /your-project-name/service #新增後端目錄
sudo mkdir /your-project-name/www #新增前端目錄

接著要將目錄權限打開，讓所有使用者都能編輯/檢視。

sudo chmod -R 777 /your-project-name
sudo chmod -R 777 /your-project-name/log
sudo chmod -R 777 /your-project-name/service
sudo chmod -R 777 /your-project-name/www

# 產生專案
### Angular

ng build --configuration production --output-hashing=all --base-href="/your-project-name/"

### Springboot

mvn package -P prod

### PostgreSQL
先備份資料庫，用 DBeaver 重新裝入就好。可以參考：[網頁上版：利用DBeaver開啟虛擬機資料庫](https://hackmd.io/mDmmetcmTpu1P0ewzyHVEg#%E5%88%A9%E7%94%A8-DBeaver-%E9%96%8B%E5%95%9F%E8%99%9B%E6%93%AC%E6%A9%9F%E8%B3%87%E6%96%99%E5%BA%AB)

ssh -N -L 5434:127.0.0.1:5432 -i ~/.ssh/your-private-key [e-mail]

接著把以上三個檔案 `service.jar`、`angular.dist`、`postgre.sql` 放到對應的目錄中。

# 寫一個 Service 組態檔
這個檔案要放在 `etc/systemd/system` 讓 Linux 能夠和檔案溝通。

[Unit]
Description=your-service-description # 隨便寫一個描述

[Service]
User=your-service-name # 虛擬機user名稱
ExecStart=/usr/bin/java -jar /path/to/your-service.jar # 這是後端服務的目錄
ExitStatus=143 # 不知道，先不要動
WorkingDirectory=/your-directory/www # 這是前端網頁的目錄
TimeoutStopSec=10 # 10秒後沒反應會自動停止
Restart=on-failure # 不知道，先不要動
RestartSec=5 # 不知道，先不要動

[Install]
WantedBy=multi-user.target # 不知道，先不要動

# 設定 nginx 服務
從根目錄開始找到 nginx 設定檔：`/etc/nginx/nginx.conf`

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 4096;
        # multi_accept on;
}

http {
    # upstream 區塊千萬不要動！
    upstream springboot
      {
         server localhost:8080  max_conns=100;
      }

    # 主要編輯的區塊是 server
     server
        {
            client_max_body_size 20M;
            
            # HTTP、HTTPS設定（不用動，80是http、443是https）
            listen 80;
            listen [::]:80;
            listen 443;
            
            # 虛擬機名稱設定（不用動）
            server_name officepie.pro;
            
            # SSL/TLS 憑證設定（不用動）
            ssl on;
            ssl_certificate /usr/share/nginx/sslcrt/cert.pem;
            ssl_certificate_key /usr/share/nginx/sslcrt/private.key;

            root /luxup/www;

            #教育處後端服務設定（不用動）
            location /EducationService/
            {
                proxy_pass http://localhost:8081;
            }

            #Luxup後端服務設定（不用動）
            location /LuxupService/
            {
                proxy_pass http://localhost:8080;
            }

            #SCprod-Hris後端服務設定（不用動）
            location /HrisService/
            {
                proxy_pass http://localhost:8082;
            }

            #SCprod-Pmis後端服務設定（不用動）
            location /PmisService/
            {
                proxy_pass http://localhost:8083;
            }
            
            #在這邊設定easyDo後端服務

            #教育處前端網頁（學生版）設定（不用動）
            location /EducationStudent/ {
                alias /education/www/EducationStudent/;
            }

            #教育處前端網頁（後台）設定（不用動）
            location /EducationBackend/ {
                alias /education/www/EducationBackend/;
            }

            #教育處前端網頁（工作人員）設定（不用動）
            location /EducationVendor/ {
                alias /education/www/EducationVendor/;
            }

            #SCprod-Hris前端網頁設定（不用動）
            location /hris/ {
                alias /hris/www/hris/;
            }

            #SCprod-Pmis前端網頁設定（不用動）
            location /pmis/ {
                alias /pmis/www/pmis/;
            }
            
            #在這邊設定easyDo前端網頁

            #共用檔案設定（不用動）
            location /files/ {
                alias /hris/www/files/;
            }

    }
### ================== 以下內容都不要動！ ============== ###
        ##
        # Basic Settings 基本設定
        ##

        sendfile on;
        tcp_nopush on;
        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/TLS相關設定
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # 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_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、service服務重置

sudo systemctl reload nginx
sudo systemctl daemon-reload

到這邊為止就把所有的虛擬機設定都解決了，現在只要測試能不能正常運作就好。
1. 打開自己電腦的 browser 連上虛擬機的 IP 或是 DomainName
2. 觸發不同功能看後端服務能不能正常運作（按鈕、跳頁、輸入資料...等）
3. 完成！