快來新增一篇文章,將能打開個人文章頁服務!

[Django教學17]Django專案整合Amazon S3雲端服務5步驟就上手

[Django教學17]Django專案整合Amazon S3雲端服務5步驟就上手
Photo by Christian Wiediger on Unsplash
Amazon相信大家都知道,是一個非常大的電商平台,同時,也提供了許多的雲端服務,常見的像儲存服務(S3)、虛擬伺服器(EC2)及運算服務(Lambda)等,讓全世界的開發人員,透過整合Amazon的雲端服務,來提升應用程式的彈性及效能。

所以本文以[Django教學9]6個步驟搞懂Django上傳圖片的功能部落格文章為基礎,分享如何將Django專案中的靜態檔案,如JavaScript、CSSImage(圖片)檔等,儲存至Amazon S3服務,讓Django專案有較佳的儲存彈性,而不會隨著靜態檔案的增加,使得專案無限的擴張。其中的整合步驟包含:
  • 建立Amazon S3 Bucket
  • 建立Amazon IAM
  • 安裝django-storages
  • 儲存Django的上傳檔案到Amazon S3
  • 儲存Django靜態檔案Amazon S3

一、建立Amazon S3 Bucket

在開始進行實作前,需事先到AWS 管理主控台註冊帳號,首頁如下圖:
點擊「建立新帳戶」,按照步驟填寫相關資料即可。建立成功且登入後,就可以看到如下圖的畫面:
接著在「尋找服務」的地方就可以查詢所需的Amazon服務,所以輸入S3就可以找到,如下圖:
點擊後,會看到Amazon S3服務的首頁,可以進行相關的設定及操作。首先,要建立一個儲存體,就像儲存資料一定要先建立一個資料庫一樣,選擇「建立儲存體」,如下圖:
輸入儲存體的名稱及選擇「us-west-2」區域,剩下的保留預設值,點擊右下角的「建立儲存體」按鈕即可,如下圖:
建立成功後,就可以在Amazon S3的首頁看到剛剛所建立的儲存體,如下圖:
接下來,就要設定這個Amazon S3儲存體的存取權限。點擊儲存體的名稱,並且切換到「許可」頁籤下的「CORS組態」,如下圖:
貼上範例中的以下CORS組態:



    *
    GET
    POST
    PUT
    *

其中的含義簡單來說,就是允許所有地區的使用者,透過GET、POSTPUT請求方法,來存取這個儲存體,也就是能夠查詢、新增及修改儲存體中的資料。詳細的設定方式可以參考Amazon官方文件

二、建立Amazon IAM

有了Amazon S3儲存體後,接著就要建立一個使用者來管理。回到Amazon管理主控台首頁,在「尋找服務」的地方輸入IAM,如下圖:
進入IAM(Identity and Access Management)的設定畫面後,選擇左側的「使用者」,並且點擊「新增使用者」按鈕,如下圖:
在第一步驟中輸入使用者的名稱及選擇存取類型,這邊勾選「程式設計方式存取」,也就是這個使用者需利用「存取金鑰ID」及「私密存取金鑰」來存取Amazon服務,如下圖:
接著,在第二步驟設定使用者所能存取的Amazon服務。切換到「直接連接現有政策」的頁籤下,輸入S3來進行查詢,並且勾選「AmazonS3FullAccess」,意思是這個使用者能夠利用第一步驟所選擇的存取類型來存取Amazon S3儲存體,如下圖:
之後的第三及第四步驟保留預設值即可,到第五步驟就可以看到Amazon提供給這個使用者專屬的「存取金鑰ID」及「私密存取金鑰」,如下圖:

三、安裝django-storages

Amazon S3服務皆設定完成後,接下來就要安裝Django客製化後端儲存的套件django-storages,以及與Amazon S3服務協作的套件boto3,可以使用以下指令來進行安裝:
$ pip install django-storages
$ pip install boto3
安裝完成,開啟Django專案中的settings.py檔案,在INSTALL_APPS的地方,加上storages,如下範例:
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'photos.apps.PhotosConfig',
    'storages',
]

四、儲存Django的上傳檔案到Amazon S3

開啟Django專案中的settings.py檔案,增加Amazon S3服務的相關設定,包含「存取金鑰ID」、「私密存取金鑰」及「Amazon S3儲存體名稱」,如下範例:
#Amazon S3 Configuration
AWS_ACCESS_KEY_ID = '*****'  #存取金鑰ID
AWS_SECRET_ACCESS_KEY = '*****'  #私密存取金鑰
AWS_STORAGE_BUCKET_NAME = 'imagewall-bucket'  #Amazon S3儲存體名稱
接著,增加Django Storages客製化後端儲存的設定,如下範例:
#Django Storages Configuration
AWS_S3_FILE_OVERWRITE = False  #同名檔案是否要覆寫
AWS_DEFAULT_ACL = None
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage' #上傳的媒體檔案
範例中的第4行設定,會將使用者所上傳的檔案,自動儲存至Amazon S3儲存體,而不會放置在Django專案中,所以在執行專案,並且上傳圖片後,在Chrome瀏覽器中點擊圖片右鍵,選擇檢查,就會看到圖片的來源為Amazon S3儲存體,如下圖:
而在Amazon S3儲存體中,也可以看到成功的將使用者所上傳的圖片檔儲存起來,如下圖:

五、儲存Django靜態檔案到Amazon S3

除了可以將Django所上傳的檔案儲存到Amazon S3儲存體外,專案中的靜態檔案,像是JavaScript、FontsCSS檔等,也可以進行儲存。

首先,開啟Django專案的settings.py檔案,確認靜態檔案的路徑設定,如下範例:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
接著,利用以下的指令,將Django專案中的靜態檔案收集至static資料夾中:
$ python manage.py collectstatic
執行結果
為了要告訴Django框架靜態檔案需讀取Amazon S3儲存體,所以在settings.py檔案中,再增加以下的設定:
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'  # 靜態檔案的儲存
這時候執行專案,並且連線到Django Administration(管理員後台),就會發現板面的樣式都消失了,如下圖:
因為Django的靜態檔案已改為讀取Amazon S3儲存體,而Amazon S3儲存體中尚未有專案中的靜態檔案,所以,回到Amazon S3的專案儲存體中,點擊上傳的按鈕,如下圖:
然後將Django專案中,將剛才在static資料夾下所收集的所有靜態檔案資料夾,拖拉至Amazon S3的上傳畫面中,如下圖:
上傳成功後,Django專案中只要保留static資料夾,而它之下的靜態檔案資料夾,就可以進行刪除。

最後,重新啟動本地端伺服器,連線到Django Administration(管理員後台),板面的樣式就恢復正常了。

六、小結

透過本文的實作教學,Django專案就能成功的和Amazon S3服務進行整合,相較於儲存在Django專案中,提升了上傳檔案的儲存彈性,不會隨著檔案的增加,而難以管理及擴充。詳細的程式碼可以參考以下的GitHub連結,希望對於正在學習的你們,有所幫助。

如果您喜歡我的文章,請幫我按五下Like(使用GoogleFacebook帳號免費註冊),支持我創作教學文章,回饋由LikeCoin基金會出資,完全不會花到錢,感謝大家。

comment