Richard隨手筆記 - 網路概論

IIS問題-500.19

2022-07-19T13:53:00+08:00

本機發佈程式到IIS會出現 500.19錯誤，緣由是因為URLRewrite的在站臺的Web.Config設定錯誤，導致此問題發生。並且記錄當初處理的情況流程。

錯誤畫面： ![[IIS上WebConfig錯誤50019.png]]

看起來上面的錯誤是因為下面這兩個設定造成的，我只要把下面這兩個設定去除，IIS就可以用了，所以似乎是因為IIS原本的模組就已經有關於這兩個資料夾目錄隱藏的設定，但是現在又在Web.config裡面又在次設定了一次，所以可能出錯的原因是這個

![[PCAdmin的WebConfig設定.png]] ![[system32的config設定.png]] 把站臺的WebConfig設定的App_Data 、Bin 的那兩個東西拿掉就OK了，但是這似乎不是解決的真正，因為這樣修改，把IIS所有關於安全性隱藏資料夾的問題給顯現出來了，變成只有DevPCAdmin專案才回隱藏這兩個資料夾，其他反而凸顯出問題

重點是站臺有裝 URL Rewrite 2.0：¶

<rewrite>
  <outboundRules>
    <rule name="Remove Server">
      <match serverVariable="RESPONSE_SERVER" pattern=".+" />
      <action type="Rewrite" value="Apache/2.4.12 (Unix) OpenSSL/1.0.2a PHP/5.6.0" />
    </rule>
  </outboundRules>
</rewrite>

拿掉這個的時候就好了，所以是IIS要新裝這個功能才可以

![[安裝URLReWrite.jpg]]

多年後又出現一樣的問題，在重新發佈之後出現一樣問題，但是在IIS上已經安裝此功能

![[WebPlatformInstaller安裝項目.png]]

解決：一開始就設定錯誤，預設的隱藏標籤本來就包含下列，所以必定會造成錯誤，查看PROD設定卻沒有這個設定，原來在一開始就在本機的設定是錯誤的了

<hiddenSegments>
    <add segment="App_Data" />
    <add segment="bin" />
</hiddenSegments>

反向代理

2022-03-29T20:00:00+08:00

在瞭解反向代理之前，先瞭解正向代理，

正向代理（forward proxy）：是一個位於客戶端和目標伺服器之間的伺服器(代理伺服器)，為了從目標伺服器取得內容，客戶端向代理伺服器發送一個請求並指定目標，然後代理伺服器向目標伺服器轉交請求並將獲得的內容返回給客戶端。

![[正向代理伺服器.jpg]]

正向代理伺服器用途： - 突破訪問限制 - 提高訪問速度 - 隱藏客戶端真實IP

反向代理（reverse proxy）：是指以代理伺服器來接受internet上的連接請求，然後將請求轉發給內部網絡上的伺服器，並將從伺服器上得到的結果返回給internet上請求連接的客戶端，此時代理伺服器對外就表現為一個反向代理伺服器。

![[反向代理.jpg]]

反向代理的用途： - 隱藏伺服器真實IP - 負載平衡 - 提高訪問速度 - 提供安全保障

正向代理和反向代理的區別¶

雖然正向代理伺服器和反向代理伺服器所處的位置都是客戶端和真實伺服器之間，所做的事情也都是把客戶端的請求轉發給伺服器，再把伺服器的響應轉發給客戶端，但是二者之間還是有一定的差異的。

1、正向代理其實是客戶端的代理，幫助客戶端訪問其無法訪問的伺服器資源。反向代理則是伺服器的代理，幫助伺服器做負載均衡，安全防護等。

2、正向代理一般是客戶端架設的，比如在自己的機器上安裝一個代理軟體。而反向代理一般是伺服器架設的，比如在自己的機器集群中部署一個反向代理伺服器。

3、正向代理中，伺服器不知道真正的客戶端到底是誰，以為訪問自己的就是真實的客戶端。而在反向代理中，客戶端不知道真正的伺服器是誰，以為自己訪問的就是真實的伺服器。

4、正向代理和反向代理的作用和目的不同。正向代理主要是用來解決訪問限制問題。而反向代理則是提供負載均衡、安全防護等作用。二者均能提高訪問速度。

結論：簡單講，正向代理就是使用者這段的，相反的，反向代理就是伺服器這段的代理不同，正向代理是使用者，反向代理是真實伺服器

參考資料：

終於有人把正向代理和反向代理解釋的明明白白了

透過代理伺服器篩選內容

使用Automator定期執行Blog發佈

2022-01-14T17:40:00+08:00

之前寫的同步方式：[[Obsidian筆記同步到Blog排程]]，還是很多地方不完善，每次都需要手動點擊同步，然後在執行發佈程式，想說用Apple Script 配合定期執行python語法，就可以Obsidian完成筆記後，直接PUSH 筆記的GitHub，然後在Mac電腦那邊就可以一氣呵成。

流程步驟¶

設定在電腦開啟時，一起啟動Obsidian軟體
等待同步程式執行
加入 Automator 排程，讓 Mac 自動幫執行程式
執行內容程式順序：
1. 判斷 Blog_Pelican 的Git 異動清單若是有修改則開始執行
2. 執行 pelican content 執行Blog建置，產生靜態Html檔
3. Blog_Pelican 的 Git 執行 Commit 與 PUSH

參考：

為什麼 Mac 使用者應該學習 Apple Script？以 Evernote 舉例，自動建立每日反省筆記，自動化處理繁瑣流程

MAC 設定 Shell Script(.sh) 檔，指定終端機將它開啟並自動執行

HTTP 請求方法

2022-01-13T11:19:00+08:00

HTTP/1.1協定中共定義了八種方法（也叫「動作」）來以不同方式操作指定的資源，在此先列出常用的方法來記錄，詳細的方法清單在下面連結的維基百科查看。

GET¶

向指定的資源發出「顯示」請求。使用GET方法應該只用在讀取資料

POST¶

向指定資源提交資料，請求伺服器進行處理（例如提交表單或者上傳檔案）。資料被包含在請求本文中。這個請求可能會建立新的資源或修改現有資源，或二者皆有。每次提交，表單的資料被瀏覽器用編碼到HTTP請求的body里。

瀏覽器發出的POST請求的body主要有兩種格式：

1.一種是application/x-www-form-urlencoded用來傳輸簡單的資料，大概就是”key1=value1&key2=value2”這樣的格式。 2.一種是傳檔案，會採用multipart/form-data格式。

採用後者是因為application/x-www-form-urlencoded的編碼方式對於檔案這種二進位的資料非常低效。

OPTIONS¶

這個方法可使伺服器傳回該資源所支援的所有HTTP請求方法。用 * 來代替資源名稱，向Web伺服器傳送OPTIONS請求，可以測試伺服器功能是否正常運作。

參考資料：

超文本傳輸協定

HTTP StatusCode 清單

2022-01-13T11:04:00+08:00

所有HTTP回應的第一行都是狀態行，依次是當前HTTP版本號，3位數字組成的狀態代碼，以及描述狀態的短語，彼此由空格分隔。

狀態代碼的第一個數字代表當前回應的類型：

1xx訊息——請求已被伺服器接收，繼續處理
2xx成功——請求已成功被伺服器接收、理解、並接受
3xx重新導向——需要後續操作才能完成這一請求
4xx請求錯誤——請求含有詞法錯誤或者無法被執行
5xx伺服器錯誤——伺服器在處理某個正確請求時發生錯誤

深入理解CORS

2022-01-12T15:44:00+08:00

前言¶

在兩篇文章的洗禮後，好好的來理解所謂的CORS問題處理

[[Fetch語法對Instagram的CORS問題]]
[[IIS站臺對Options請求直接返回404]]

W3C正式的CORS規範，其中，不單只是規範瀏覽器處理跨域請求的方式，也規範了伺服端可控制的項目，像是允許的來源、請求方法、可否發送Cookie、可取得的回應標頭，甚至回應有效期限等。

Http Header的CORS項目¶

CORS
- Access-Control-Allow-Origin：
  - server端接收跨來源時，授權來源，在Response加上此header，如果server允許任何來源的跨來源請求就使用 * 號
- Access-Control-Allow-Credentials：
  - 設定值為True False，就是跨來源請求可以在Response時，取得一些cookie之類的資訊
- Access-Control-Allow-Headers：
  - 用於響應預檢請求，以指示在發出實際請求時可以使用哪些 HTTP 標頭。
- Access-Control-Allow-Methods：
  - 指定在訪問資源以響應預檢請求時允許的一種或多種方法。
- Access-Control-Expose-Headers：
  - 指示哪些標頭可以作為響應的一部分公開，讓 JavaScript 存取其他 header
- Access-Control-Max-Age：
  - 指示預檢請求的結果可以緩存多長時間
- Access-Control-Request-Headers：
  - 在發出預檢請求時使用，以讓服務器知道在發出實際請求時將使用哪些 HTTP 標頭。
- Access-Control-Request-Method：
  - 在發出預檢請求時使用，以讓服務器知道在發出實際請求時將使用哪種HTTP 方法。
- Origin：指示提取的來源

CORS將跨域請求分為：簡單（Simple），以及帶預檢（with Preflight）¶

簡單請求¶

方法只能是HEAD、GET、POST
可用標頭Accept、Accept-Language、Content-Language、Last-Event-ID，以及Content-Type
Content-Type也只允許三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

![[簡單請求的圖例.png]]

預檢請求¶

分兩個步驟，第一步 http OPTIONS 方法，會帶有兩個 request header：Access-Control-Request-Method 和 Access-Control-Request-Headers。第二步在OPTIONS成功後，才能發送Request

![[預檢請求的圖例.png]]

關於fetch API 的問題¶

引用文章：

很多人會認為只要將 fetch 裡的屬性 mode，調整成 mode: 'no-cors'，就可以避免 CORS，其實不是！

mode: 'no-cors 在設定上的意義是，告訴瀏覽器，我本來就知道 server 對於這個 request 是沒有設定可以存取 CORS 的，我本來就拿不到 response，我設定mode: 'no-cors，是為了，就算無法存取，也不要跑到 .catch() 那邊，讓它出現 Error。

一樣拿不到 server 的 response，但會拿到一個 status: 0 的 response。

結論：在 CORS 的限制底下，只有 server 開放 CORS 存取，你才拿得到 response，如果沒有開放，就一定拿不到。

參考：

MDN Docs HTTP 標頭

深入認識跨域請求

CORS 是什麼? 如何設定 CORS?

跨域（CORS）產生原因分析與解決方案，這一次徹底搞懂它

fetch捕獲重定向302/301

輕鬆理解 Ajax 與跨來源請求

[Day 27] Cross-Origin Resource Sharing (CORS)

IIS站臺對Options請求直接返回404

2022-01-12T14:40:00+08:00

SignalR的問題¶

之前在做SignalR的時候，需要對不同的子網域做API的呼叫，JS是在 signalr.domain.com ，需要呼叫的是在 o.domain.com 開始使用連線時，會引發CORS問題，如下圖：

錯誤 ![[CorsPreflightError.png]]

SignalR在做options時，會用 https://signalr.domain.com/negotiate?negotiateVersion=1 這樣的路徑做預檢，不過查了老半天都是回404，檢查原因有可能如下：

WebConfig是否被移除options請求的處理¶

<system.webServer>
  <handlers>
    <remove name="OPTIONSVerbHandler" />
  </handlers>
</system.webServer>

檢查IIS是否安裝了 UrlScan的東西，若安裝了請檢查AllowVerbs中是否包含了options¶

UrlScan的配置文件為UrlScan.ini (C:\Windows\System32\inetsrv\urlscan\UrlScan.ini) 將OPTIONS從[DenyVerbs]中移除並添加到[AllowVerbs]下

![[ISAPI篩選器的UrlScan.png]]

![[UrlScan的設定.png]]

在站臺的webconfig中的Allow-Method中是否加上options¶

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET" />
        <add name="Access-Control-Allow-Headers" value="x-requested-with,aspxauth" />
        <add name="Access-Control-Allow-Credentials" value="true" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

參考資料：

IIS下網站對options請求直接返回404

Cross-Origin Resource Sharing (CORS)

Fetch語法對Instagram的CORS問題

2022-01-11T22:07:00+08:00

Pelican的樣板： Pelican-Elegant。有提供一個功能在頁面可以嵌入 Instagram的PO文，使用方式就只需要定義一個DIV在Markdown的檔案中就可以嵌入，

<div class="elegant-instagram" data-instagram-id="BwWo35fAcR3"></div>

其中，data-instagram-id就是Instagram上面PO文時的連結路徑，不過使用過後出現CORS問題，在Github上面Issues也有 [BUG] Instagram code doesn’t work, browser shows blocked url because of policy

Access to fetch at 'https://www.instagram.com/p/YYYYYYYY/?__a=1' from origin 'https://MYURL' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Instagram gallery is not shown

由建議處理方式是fetch 加上 mode:’no-cors’

const instagramId = ele.dataset.instagramId;

fetch(`https://www.instagram.com/p/${instagramId}/?__a=1`,{mode:"no-cors"})

雖然不會出現CORS的問題了，但是IG的API回應卻是302

![[使用CORS後API變302回應.png]]

![[已經修改fetch模式是nocors.png]]

由於Response回應302，所以後續就直接錯誤了，認為應該是用fetch API去呼叫，會跳轉到IG的Login畫面，API是無法呈現的所以後續無法轉JSON格式，看來是需要增加access token變成登入狀態

access-control-expose-headers: X-IG-Set-WWW-Claim
alt-svc: h3=":443"; ma=3600,h3-29=":443"; ma=3600
cache-control: private, no-cache, no-store, must-revalidate
content-language: zh-tw
content-length: 0
content-security-policy: report-uri https://www.instagram.com/security/csp_report/; default-src 'self' https://www.instagram.com; img-src data: blob: https://*.fbcdn.net https://*.instagram.com https://*.cdninstagram.com https://*.facebook.com https://*.fbsbx.com https://*.giphy.com; font-src data: https://*.fbcdn.net https://*.instagram.com https://*.cdninstagram.com; media-src 'self' blob: https://www.instagram.com https://*.cdninstagram.com https://*.fbcdn.net; manifest-src 'self' https://www.instagram.com; script-src 'self' https://instagram.com https://www.instagram.com https://*.www.instagram.com https://*.cdninstagram.com wss://www.instagram.com https://*.facebook.com https://*.fbcdn.net https://*.facebook.net 'unsafe-inline' 'unsafe-eval' blob:; style-src 'self' https://*.www.instagram.com https://www.instagram.com 'unsafe-inline'; connect-src 'self' https://instagram.com https://www.instagram.com https://*.www.instagram.com https://graph.instagram.com https://*.graph.instagram.com https://i.instagram.com/graphql_www https://graphql.instagram.com https://*.cdninstagram.com https://api.instagram.com https://i.instagram.com https://*.i.instagram.com wss://www.instagram.com wss://edge-chat.instagram.com https://*.facebook.com https://*.fbcdn.net https://*.facebook.net chrome-extension://boadgeojelhgndaghljhdicfkmllpafd blob:; worker-src 'self' blob: https://www.instagram.com; frame-src 'self' https://instagram.com https://www.instagram.com https://*.instagram.com https://staticxx.facebook.com https://www.facebook.com https://web.facebook.com https://connect.facebook.net https://m.facebook.com; object-src 'none'; upgrade-insecure-requests
content-type: text/html; charset=utf-8
date: Wed, 12 Jan 2022 06:27:35 GMT
expires: Sat, 01 Jan 2000 00:00:00 GMT
location: https://www.instagram.com/accounts/login/
pragma: no-cache
set-cookie: mid=Yd501wALAAE2tYIXNpy3T6lgubqt; Domain=.instagram.com; expires=Fri, 12-Jan-2024 06:27:35 GMT; Max-Age=63072000; Path=/; Secure
set-cookie: ig_did=B725DF97-76E5-4F3A-915A-366CD821B3A9; Domain=.instagram.com; expires=Fri, 12-Jan-2024 06:27:35 GMT; HttpOnly; Max-Age=63072000; Path=/; Secure
set-cookie: ig_nrcb=1; Domain=.instagram.com; expires=Thu, 12-Jan-2023 06:27:35 GMT; Max-Age=31536000; Path=/; Secure
strict-transport-security: max-age=31536000
vary: Accept-Language, Cookie
x-aed: 48
x-content-type-options: nosniff
x-fb-trip-id: 1679558926
x-frame-options: SAMEORIGIN
x-ig-origin-region: prn
x-ig-push-state: c2
x-ig-request-end-time: 1939701098
x-ig-request-start-time: 1939701061.9430351
x-xss-protection: 0

目前似乎無法針對 302 問題解決。若是做登入IG後，再次GET資料，雖然會有200的正常狀態，但是其實返回的物件是一個 status:0 的情況，參考了這篇： Fetch 的使用注意事項

![[IG回應的資歷形態.png]]

*引用：

很多人會認為只要將 fetch 裡的屬性 mode，調整成 mode: 'no-cors'，就可以避免 CORS，其實不是！ mode: 'no-cors 在設定上的意義是，告訴瀏覽器，我本來就知道 server 對於這個 request 是沒有設定可以存取 CORS 的，我本來就拿不到 response，我設定mode: 'no-cors，是為了，就算無法存取，也不要跑到 .catch() 那邊，讓它出現 Error。一樣拿不到 server 的 response，但會拿到一個 status: 0 的 response。*

結論：在 CORS 的限制底下，只有 server 開放 CORS 存取，你才拿得到 response，如果沒有開放，就一定拿不到。¶

參考資料：

https://www.ithome.com.tw/voice/129558

https://shubo.io/what-is-cors/

https://sa123.cc/mbz87ag1594xka2ohlgj.html

https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/750548/

Instagram的記錄

2022-01-11T16:06:00+08:00

月眉濕地生態園區

OrchardCore CMS系統

2021-12-01T11:12:00+08:00

安裝 .NET Core與SDK¶

OrchardCore CMS安裝流程在MAC上，主要在非Windows系統的安裝流程。

主要參考：https://github.com/orchardcmsnet/MyOrchardCoreCMSonLinuxUsingVSCode

另外NET CORE的Runtime安裝參考微軟官方：https://docs.microsoft.com/zh-tw/dotnet/core/install/linux-ubuntu#how-to-install-other-versions

注意：

用Chrome的瀏覽器，因為不是Https，會自動將後臺登入自動導302Found問題，導致後臺登入一直出現在登入頁面，改用FireFox就可以
另外 aspnetcore-runtime-3.1 皆改用3.1似乎才能正常運作

但是注意目前.net core 已經到5.0 ，這個CMS框架只支援3.0

安裝另外執行以下語法：

sudo apt-get install -y gpg
wget -O - https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor -o microsoft.asc.gpg
sudo mv microsoft.asc.gpg /etc/apt/trusted.gpg.d/
wget https://packages.microsoft.com/config/ubuntu/20.04/prod.list
sudo mv prod.list /etc/apt/sources.list.d/microsoft-prod.list
sudo chown root:root /etc/apt/trusted.gpg.d/microsoft.asc.gpg
sudo chown root:root /etc/apt/sources.list.d/microsoft-prod.list
sudo apt-get update; \
  sudo apt-get install -y apt-transport-https && \
  sudo apt-get update && \
  sudo apt-get install -y aspnetcore-runtime-3.1


sudo apt-get install -y gpg
wget -O - https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor -o microsoft.asc.gpg
sudo mv microsoft.asc.gpg /etc/apt/trusted.gpg.d/
wget https://packages.microsoft.com/config/ubuntu/20.04/prod.list
sudo mv prod.list /etc/apt/sources.list.d/microsoft-prod.list
sudo chown root:root /etc/apt/trusted.gpg.d/microsoft.asc.gpg
sudo chown root:root /etc/apt/sources.list.d/microsoft-prod.list
sudo apt-get update; \
  sudo apt-get install -y apt-transport-https && \
  sudo apt-get update && \
  sudo apt-get install -y dotnet-runtime-3.1

Orchard Core的所有功能概述¶¶

這是Orchard Core所有內置功能的分類概覽。

參考: https://docs.orchardcore.net/en/dev/docs/reference/

分類：

admin
App Security
Authentication and User Management
Content
Design
Extensibility
Hosting and Operations
Localization
Navigation
Search, Indexing, Querying

下面就先記錄一下最主要的功能Content Type

Content Type(內容類別)¶

Content Type：選擇內容類型列表

簡單說明就是頁面的顯示自定義類型，像是產品頁面類型，首頁頁面類型，部落格頁面類型，等等的分別，

例如：IndexPage 可以定義為首頁，ProductListPage可以定義為產品列表頁面，ProductPage可以定義為產品頁面

Content Type 裡面會有兩個部分組成

Content Parts ，Content Field

Content Parts(內容部分)¶

![[contentParts的功能.png]]

該Title模塊提供了標題部分，使您可以自定義內容項的DisplayText屬性。整個管理界面都使用DisplayText屬性來幫助您識別內容項。

標題部分¶ 將此部分附加到您的內容項以自定義ContentItem的DisplayText屬性。

TitlePart設置¶ 默認情況下，附加TitlePart將允許內容編輯器手動編輯ContentItem的DisplayText（標題）。

您也可以通過使用Liquid表達式指定模式來生成標題。

模式有權訪問當前的ContentItem，並在ContentItem更新時執行。例如，字段可用於生成圖案。以下示例在內容類型上使用名為的Text字段。

{{ ContentItem.Content.Product.Name.Text }}

Content Fields(內容欄位)¶

![[contentFields的功能.png]]

安裝Let’s Encrypt電子證書

2021-10-08T18:45:00+08:00

在本機驗證安裝Let’s Encrypt

brew install certbot

brew ls certbot

然後在Mac執行

certbot --config-dir ~/letsencrypt/etc --work-dir ~/letsencrypt/lib --logs-dir ~/letsencrypt/log certonly --manual

接下來會有三個步驟要輸入：

1.Email

2.domain

3.會要你在規定的路徑上產生讀取文檔：

Saving debug log to /Users/jarvis.zheng/letsencrypt/log/letsencrypt.log

Please enter the domain name(s) you would like on your certificate (comma and/or

space separated) (Enter 'c' to cancel): linebot.richardrobot.xyz

Requesting a certificate for linebot.richardrobot.xyz

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Create a file containing just this data:



YYUCwTYHewbZ0vVcobFBA8kmL-xs-8AQAj5aH7tD3HI.mFCPG4KMVD6yTJlxRiPv1IXrYQENjpRSb9DJyynjW5I



And make it available on your web server at this URL:



http://linebot.richardrobot.xyz/.well-known/acme-challenge/YYUCwTYHewbZ0vVcobFBA8kmL-xs-8AQAj5aH7tD3HI



- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Press Enter to Continue

從上面的指示來看要在指定的網址：

http://linebot.richardrobot.xyz/.well-known/acme-challenge/YYUCwTYHewbZ0vVcobFBA8kmL-xs-8AQAj5aH7tD3HI

產生可讀取字串：

YYUCwTYHewbZ0vVcobFBA8kmL-xs-8AQAj5aH7tD3HI.mFCPG4KMVD6yTJlxRiPv1IXrYQENjpRSb9DJyynjW5I

在Django的做法如下：¶

在 url.py 設定網址：

![[url設定的圖片.png]]

檔案放置的地方： ![[檔案放置的地方.png]]

Views.py 程式讀取的方式： ![[views程式讀取的方式.png]]

驗證成功存放的路徑： ![[驗證成功的畫面.png]]

nginx 新增的配置

第一個
server {

server_name linebot.richardrobot.xyz;

listen 80;

return 301 https://linebot.richardrobot.xyz$request_uri;

}

第二個
server{

listen 443;

server_name linebot.richardrobot.xyz;



ssl on; # <-

ssl_certificate /Users/jarvis.zheng/LineBot/ssl/cert.pem; # <-

ssl_certificate /Users/jarvis.zheng/LineBot/ssl/chain.pem; # <-

ssl_certificate_key /Users/jarvis.zheng/LineBot/ssl/privkey.pem; # <-


    location / {

        #第三個
        proxy_set_header X-Forwarded-Proto https; # <-這個很重要，記得加入


    }

}

沒有加最後的分號 ; (LineBot) jarvis.zheng@zhengruichangdeMac-mini LineBot % sudo nginx -s reload Password: nginx: [warn] the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /opt/homebrew/etc/nginx/sites-enabled/LineBot:5 nginx: [emerg] no "ssl_certificate_key" is defined for certificate "/Users/jarvis.zheng/LineBot/ssl/chain.pem" and the "ssl" directive in /opt/homebrew/etc/nginx/sites-enabled/LineBot:5

參考資料：

Supervisor

2021-10-05T19:22:00+08:00

在 Linux上可以使用systemctl 這個服務來開機就能自動啓動寫好的網站服務，等等其他的，但是在Mac上卻無法，使用supervisor還有Web畫面可以查看

![[Supervisor服務畫面.png]]

透過brew來安裝：¶

brew install supervisor

設定檔路徑：¶

由於是Mac M1 的系統，homebrew已經將設定的路徑放在 /opt/homebrew/etc

如下圖，開啓 supervisor.conf 檔案

![[supervisor的ini設定畫面.png]]

可以註解前面的 ; 符號來啓用設定 :

可以開啓 Web的畫面啓用登入帳號密碼

[inet_http_server]          ; inet (TCP) server disabled by default
port=127.0.0.1:9001         ; ip_address:port specifier, *:port for all iface
username=test               ; default is no username (open server)
password=123                ; default is no password (open server)

在最後加入客製化的設定檔：加入下面的設定，可以在/Process/ 資料夾底下設定需要的Service檔，並且用 .ini 爲副檔名

[include]
files = /Users/jarvis.zheng/Process/*.ini

已django網站爲例：

command 程序啓動命令：使用gunicorn來當WebServer，使用參數檔 gunicorn.conf.py

[program:django_server]
command=/Users/jarvis.zheng/miniforge3/envs/finlab/bin/gunicorn -c gunicorn.conf.py StockSecretary.wsgi
process_name=%(program_name)s
directory=/Users/jarvis.zheng/StockWeb/

啓動服務：

sudo brew services start supervisor

參考資料：

SUPERVISOR 介紹與使用方式

Jupyter Notebook and Nginx Setup

Mac OSX 開機啟動應用 (supervisor)

Python Tricks —— 使用 Supervisor 控制 Linux 進程

SourceTree權限問題

2021-09-29T17:58:00+08:00

Sourcetree出現Permission denied (publickey)¶

![[Sourcetree出現Permissiondenied.png]]

這個問題的產生可能是程式問題，已經透過SourceTree的UI界面功能去產生SSH的KEY 做法來源[[Mac 上改變 Git 認證模式]] ，也已經至GitHub去註冊KEY

![[Pasted image 20210929180241.png]]

Google以後參考資料部落格：

MacOS更新後使用Sourcetree出現Permission denied (publickey)

就去找出當初用GitHub產生的PrivateKey在哪如下圖左紅框，就執行一下以下語法就可以了

![[Pasted image 20210929180643.png]]

==語法：==

執行新增

ssh-add /Users/jarvis.zheng/.ssh/jarvis.zheng-GitHub

檢查語法

ssh -T git@github.com

Mac 上改變 Git 認證模式

2021-09-16T17:53:00+08:00

2021/09/14 今天在mac 上面在 git clone https://github.com/TernenceZheng/ObsidianNote.git

![[Mac上改變Git認證模式.png]]

結果我的mac顯示無法用使用者帳號密碼去登入驗證

'Mac上面錯誤訊息' Cloning into 'ObsidianNote'... Username for 'https://github.com': andy711023@gmail.com Password for 'https://andy711023@gmail.com@github.com': remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. fatal: Authentication failed for 'https://github.com/TernenceZheng/ObsidianNote.git/'

看了文章原來要去用GitHub的Token驗證方式才可以，舊的帳號密碼已經不行了，下面是Github產生的Token ![[Pasted image 20210914164331.png]]

把拿到的Token註冊在MacOS的鑰匙圈如下圖

![[Pic2021-09-144.54.10.png]]

就完成Token的驗證註冊，然後git clone就OK了

參考資料：Mac 上改變 Git 認證模式

相關主題： [[Obsidian 使用 Git 跨平台同步]] [[SourceTree權限問題]]

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

2020-12-01T15:57:00+08:00

這篇文章是從頭建立起GCP網站，與遠端連線的方法 1. 使用VNC Server來遠端桌面連線，因為有許多需要修改設定檔需要遠端執行 2. 站臺的建立方式WebServer是用Nginx+Gunicorn ，Python的站臺程式用WagtailCMS

VNC Server建立可遠端桌面連線GCP¶

首先，先在GCP建立Compute Engine的VM執行個體，VM的執行個體系統選擇Ubuntu，再將外部IP改為靜態IP

![[VM設定靜態IP.png]] ![[VM設定靜態IP2.png]]

使用平臺提供的瀏覽器Terminal

![[使用平臺提供的瀏覽器Terminal.png]] ![[使用平臺提供的瀏覽器Terminal2.png]]

安裝一些必要的套件，並且執行 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

![[安裝與執行vnc4server.png]]

修改~/.vnc/xstartup 的設定¶

輸入語法： sudo vim .vnc/xstartup

進入如下畫面：畫面是使用ubuntu的內建vim編輯器

![[畫面是使用ubuntu的內建vim編輯器.png]]

按 I 進入編輯模式貼上四行語法

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

再輸入 :wq 儲存退出

輸入語法 vncserver -kill :1

vncserver :1

以上完成vncserver建立，可遠端桌面連線了

GCP需要開啟防火牆指定 PORT 5901

![[GCP需要開啟防火牆.png]]

下載RealVNC Viewer¶

輸入 35.229.134.113:5901 連線，這個連線IP就是當初建立VM的外部靜態IP

![[下載RealVNC.png]] ![[下載RealVNC2.png]]

可遠端桌面連線是方便以後程式建置時，資料架構查看或上傳程式方便

如何在Google Cloud中的Ubuntu 上使用Postgres，Nginx和Gunicorn設置Django¶

前置準備： 1. 您的Compute Engine實例正在運行，請參閱設置Compute Engine實例。 2. 域名指向您的虛擬機。（此Domain我已先設定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

![[安裝套件跟postgresql.png]]

如下圖，在GCP的操作功能上找SQL，並且產生Cloud SQL執行個體

![[建立GCP的SQL資料庫.png]]

位置區域要跟VM的位置區域一樣

![[位置區域要跟VM的位置區域一樣.png]]

建立SQL後，下面顯示的公開IP是到時候程式Django站臺連線需要

![[建立SQL後下面顯示的公開IP是到時候程式連線需要.png]]

編輯連線設定：設定只有VM的IP可以連線，填入GCP的靜態外部IP

![[編輯連線設定設定只有VM的IP可以連線.png]]

上面建立好資料庫後，開始建立VM上面Django的專案

建立VM上面WagtailCMS的專案¶

接下來就開始是安裝與建立內容管理系統的部分，與GCP的設定大部分已完成。關於內容管理系統的試用分享可查看： [[內容管理系統CMS]]

建構的流程 1. 建立Python的虛擬環境 2. 安裝套裝程式:Django gunicorn coderedcms 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的虛擬環境

![[建立資料夾與python的虛擬環境.png]]

安裝套裝程式:Django gunicorn coderedcms¶

執行語法 pip install django gunicorn psycopg2-binary

pip install coderedcms

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

上面是建立Django專案的語法，還有CodeRed CMS 的套件，從VNC Viewer可看到資料夾

![[還有CodeRed CMS 的套從VNC Viewer可看到資料夾.png]] ![[還有CodeRed CMS 的套從VNC Viewer可看到資料夾2.png]]

設定連線字串¶

修改連線字串：連線字串在 /settings/base.py

![[修改連線字串連線字串在basepy.png]]

連線字串的修改相關名稱設定可參考Django的連線設定，連線字串的使用者與密碼就是前面在GCP設定的

![[連線字串與使用者是上面在GCE設定的.png]]

上面連線字串修改好是連線遠端SQL的資料庫後，接下來的語法執行就開始建立資料庫的Table與 Schema

執行 python manage.py migrate 初始化¶

![[開始建立資料庫的Table與Schema.png]]

執行語法：

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

![[看到以下畫面有顯示表示已經在本機跑起來.png]]

建立Gunicorn 連接起程式¶

接下來建立Gunicorn 連接起程式執行語法： sudo vim /etc/systemd/system/gunicorn.socket

![[建立Gunicorn連接起程式.png]]

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

![[建立Gunicorn連接起程式2.png]]

[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

後續¶

後續開發都是使用VSCode，發現使用Remote SSH連線遠端直接修改設定檔還比較快另外記錄使用方式： [[使用VSCode遠端SSH開發]]

參考資料：