方格精選

AWS 部署 | 初始化與創建環境

更新於 發佈於 閱讀時間約 10 分鐘

繼上次的 AWS 註冊與 EB CLI 安裝以及中途跑去學 MySQL 後,總算要開始專案的部署了,廢話不多說,直接開始。

這次要部屬的是之前做過的短網址產生器,我已經在前一篇文章 "MySQL | 專案應用篇" 中把它的資料庫改為 MySQL。接下來所有的操作,請打開終端機,cd 移動到要部署的專案路徑之下。



初始化

初始化指的是 Elastic Beanstalk 項目的初始化,在這裡會需要選擇 AWS 區域、應用程式的平台、配置 AWS 金鑰...等,具體操作如下:

  1. 終端機輸入 eb init,接下來會出現一系列引導操作。
  2. 選擇 AWS 主機區域,選離台灣最近的就對了 (應該是東京 ?)。
  3. 配置 AWS 金鑰。如果不知道自己的 AWS 金鑰在哪裡,點這裡,往下滑會有個存取金鑰區域,那裏有個建立存取金鑰,點下去就對了。
raw-image
  1. 輸入你的應用程式名稱。
  2. 選擇應用程式平台,比如 Node.js。
  3. 是否選擇 AWS 進行程式碼儲存與版本控制,一般選否啦。
  4. 是否建立 SSH,一般選 Yes 以備不時之需 (選 Yes 會讓你配置 SSH 金鑰)。
  5. 接下來就等跑完啦!



建立環境

這裡指在 Elastic Beanstalk 建立應用程式環境。

  1. eb create
  2. 輸入環境名稱,這裡隨個人配置。
  3. 輸入 DNS CNAME 前綴,可以不填直接按 Enter。
  4. 選擇 load balancer 形式,通常處理 HTTP/HTTPS 的話要選 application。
  5. 是否啟用 Spot Fleet 請求,選否。Spot Fleet 簡單來說是 AWS 的省成本方案,不過省錢的同時也要冒著隨時被 AWS 中斷的風險。
  6. 放著等跑完啦!如果出現下面這張圖就表示成功:
raw-image
  1. 打開 AWS 網站,前往 Elastic Beanstalk,點選環境,就可以看到剛剛建置的環境啦!如果看到運作狀態亮紅燈,沒關係,那可能是因為還有一些要設定的內容尚未設定。
raw-image



打包部署

這裡就是把本地的程式碼打包丟到 Elastic Beanstalk 部署啦。

  1. eb deploy,然後等它跑完。
  2. 打開 AWS 網站,前往 S3,點選儲存貯體,然後一層一層往下就可以找到剛剛打包被丟上來的程式碼了。
紅框就是剛剛打包丟上來的程式碼

紅框就是剛剛打包丟上來的程式碼



創建資料庫

現在來到 AWS 網站的 RDS 建立資料庫,這一步的步驟就用截圖記錄了,丟上來都是需要用戶選擇的部分,其他沒丟的選項通通默認基本上不會出錯。

  1. 前往 AWS 的 RDS。
  2. 選擇引擎。
選 MySQL

選 MySQL

  1. 選擇範本。
選免費方案

選免費方案

  1. 設定。
自行輸入個體識別符與密碼

自行輸入個體識別符與密碼

  1. 執行個體組態。
記得選最便宜的 micro

記得選最便宜的 micro

  1. 儲存體。
配置儲存改20,取消儲存自動擴展

配置儲存改20,取消儲存自動擴展

  1. 連線。
選連接至 EC2,並選擇我們已經建立好的環境

選連接至 EC2,並選擇我們已經建立好的環境

  1. 其他組態。
建立初始資料庫名稱,取消勾選自動備份

建立初始資料庫名稱,取消勾選自動備份

  1. 建立資料庫,建立成功會像下面這樣:
raw-image



建立 .ebextensions/migration.config

接下來需要回到專案之中建立存放 Elastic Beanstalk 環境配置文件的資料夾以及配置環境的指令檔案。

  1. 在專案下新增一個資料夾:.ebextensions。
  2. 在 .ebextensions 下建立一個檔案:migration.config。貼上下面這段,這裡要嚴格注意空格和縮排,不然後續部署會出錯:
option_settings:
aws:elasticbeanstalk:application:environment:
NODE_ENV: production

container_commands:
01_schema_migrate:
command: "./node_modules/.bin/sequelize db:migrate"
leader_only: true

// 如果你的專案需要建立種子資料可以加下面這一段​
02_seeder_migrate:
command: "./node_modules/.bin/sequelize db:seed:all"
leader_only: true
  1. 到 package.json 加入新的 script 指令:
"dbmigrate": "npx sequelize db:migrate && npx sequelize db:seed:all"

這一步做完會長像下圖這樣:

raw-image



新增環境變數

  1. 先去 config.json 中把 "production" 修改成下列樣子:
"production": {
"use_env_variable": "PROD_DATABASE_URL",
"operatorsAliases": false
}
  1. 現在回到 AWS 網站的 Elastic Beanstalk,找到組態 → 更新、監控和記錄,點擊編輯。
raw-image
  1. 找到 Environment properties 進行環境變數的新增。這裡需要新增:
    NODE_ENV = production
    PROD_DATABASE_URL = mysql://admin:password@RDS資料庫連結/prod
    其他環境變數的部分就看專案有什麼放什麼,比如把 .env 裡的東西放上來,或是像這裡 App.js 中有設定 port,那就需要添加一個 PORT 環境變數。
raw-image
  1. (備註) 關於 RDS 資料庫連結,在剛剛創建資料庫後,點進去找到端點,那個就是:
raw-image



重新部署

添加和修改了一堆雜七雜八的東西,接下來就是把改過的程式碼重新部署上 AWS。

  1. 重新部署前,先去 package.json 添加下面這一列:
// 請視你的 node 版本更改
"engines": { "node": "^18.17.1" }
raw-image
  1. 把剛剛所有的修改新增都 git addgit commit
  2. 輸入eb deploy,沒意外的話等等就可以在 AWS 的 Elastic Beanstalk 上看到部署上去的專案了:
raw-image



Troubleshooting

這裡記錄幾個我在佈署時遇到的問題。

  1. 網域變換:在開發環境中通常會定義伺服器網域是 "localhost:3000",要正式上線通常會購買一個屬於自己的網域,如果像是我一樣單純想用 AWS 佈署以及使用 RDS 資料庫,我們就得接受 AWS 給我們的預設網域,沒辦法,誰叫我沒付錢 XD。
  2. 複製功能在開發環境運作正常,但上線後卻不能用。這是因為 AWS 給我們的預設網域其實會被算是一個 "不安全的網域",navigator.clipboard會因此被瀏覽器禁用。

    那什麼算是安全的網域?https、localhost 那些都是,這就是為什麼在開發時一切都運作正常,因為我們的網域是 localhost:3000 啊!

    針對複製功能,解決方法有兩個,一個當然是搞個 https 協議,實際上也推薦這麼做啦,但我只是一個小網站,乾脆就直接改複製功能囉!
function copyText() {
        const content = document.getElementById('shorter-url');
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(content.innerText)
                .then(() => alert('Copied!'))
                .catch(err => console.error(err));
        } else {
            let textArea = document.createElement("textarea");
            textArea.value = content.innerText;
            textArea.style.position = "absolute";
            textArea.style.opacity = 0;
            textArea.style.left = "-999999px";
            textArea.style.top = "-999999px";
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            document.execCommand('copy') ? alert('Copied!') : console.error('Copy failed');
            textArea.remove();
        }
    }



連結與參考

  1. URL Shortener AWS 佈署版
  2. GitHub Repo of URL Shortener
  3. Javascript复制内容到剪贴板,解决navigator.clipboard Cannot read property 'writeText' of undefined
留言
avatar-img
留言分享你的想法!
avatar-img
Jeremy Ho的沙龍
19會員
37內容數
這個專題用來存放我在學習網頁開發時的心得及知識。
Jeremy Ho的沙龍的其他內容
2023/11/22
用 vue3-openlayers 畫張地圖吧
Thumbnail
2023/11/22
用 vue3-openlayers 畫張地圖吧
Thumbnail
2023/11/13
Vue3 筆記,指令進階篇
Thumbnail
2023/11/13
Vue3 筆記,指令進階篇
Thumbnail
2023/11/12
Vue3 學習筆記,vue-router 篇。
Thumbnail
2023/11/12
Vue3 學習筆記,vue-router 篇。
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
該服務透過記錄在AWS控制台上執行的操作並產生範例程式碼來實現 Infrastructure as Code (IaC) 目前僅在 us-east-1 的 EC2 控制台上可用 支援的格式: CDK(Java) CDK(Python) CDK(TypeScript) CloudFor
Thumbnail
該服務透過記錄在AWS控制台上執行的操作並產生範例程式碼來實現 Infrastructure as Code (IaC) 目前僅在 us-east-1 的 EC2 控制台上可用 支援的格式: CDK(Java) CDK(Python) CDK(TypeScript) CloudFor
Thumbnail
最近看到一些網路教學AWS S3可以部署靜態網頁,就想說那不如試試看將local swagger部署上去,之後還可以透過github action 自動部署swagger到s3上,於是花點時間看個影片並搭配chatgpt來實現
Thumbnail
最近看到一些網路教學AWS S3可以部署靜態網頁,就想說那不如試試看將local swagger部署上去,之後還可以透過github action 自動部署swagger到s3上,於是花點時間看個影片並搭配chatgpt來實現
Thumbnail
SQL 基本篇 - CRUD、運算子、內建函式
Thumbnail
SQL 基本篇 - CRUD、運算子、內建函式
Thumbnail
AWS 佈署簡單操作以及 RDS 建立篇
Thumbnail
AWS 佈署簡單操作以及 RDS 建立篇
Thumbnail
MySQL 應用到 URL Shortener 上
Thumbnail
MySQL 應用到 URL Shortener 上
Thumbnail
1.首先 這是 “AWS 上的工作負載發現” 的解決方案,我嘗試了一下,覺得很方便,所以介紹一下~ https://aws.amazon.com/tw/solutions/implementations/workload-discovery-on-aws/ 2. 部署 官方提供 CloudF
Thumbnail
1.首先 這是 “AWS 上的工作負載發現” 的解決方案,我嘗試了一下,覺得很方便,所以介紹一下~ https://aws.amazon.com/tw/solutions/implementations/workload-discovery-on-aws/ 2. 部署 官方提供 CloudF
Thumbnail
AWS 部署學習 - Day1,註冊與安裝 EB
Thumbnail
AWS 部署學習 - Day1,註冊與安裝 EB
Thumbnail
📔心得 最近,我在探索 Ansible 自動化工具的過程中,決定運用它來建立 ELK Stack,這是我之前使用 Docker 建立的經驗的延伸。在這個過程中,我想分享一下我的學習心得。
Thumbnail
📔心得 最近,我在探索 Ansible 自動化工具的過程中,決定運用它來建立 ELK Stack,這是我之前使用 Docker 建立的經驗的延伸。在這個過程中,我想分享一下我的學習心得。
Thumbnail
先說,我並非專業人士~ 只是分享建立的過程與經驗,不要問我問題~ 我可能、應該無法解答,哈哈哈。 另,這只是一份 草稿? 操作簡述~ 容我不很詳細的抓畫面了! 我之後 "應該" 會拍影片說明整個過程,真的有拍的話,再補上影片網址。
Thumbnail
先說,我並非專業人士~ 只是分享建立的過程與經驗,不要問我問題~ 我可能、應該無法解答,哈哈哈。 另,這只是一份 草稿? 操作簡述~ 容我不很詳細的抓畫面了! 我之後 "應該" 會拍影片說明整個過程,真的有拍的話,再補上影片網址。
Thumbnail
本篇文章要介紹的是 AWS 的雲端運算服務 —— Amazon Elastic Compute Cloud (EC2),文末也會帶領讀者使用 EC2 建立 Web Server。
Thumbnail
本篇文章要介紹的是 AWS 的雲端運算服務 —— Amazon Elastic Compute Cloud (EC2),文末也會帶領讀者使用 EC2 建立 Web Server。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News