# Learning Docker, Part 4
###### tags: `Docker`
## Using Nginx
使用Nginx作為production環境下的web server

1. 建立一個Dockerfile並輸入以下內容

FROM node:20-alpine as builder
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx
COPY --from=builder app/build /usr/share/nginx/html

2. 接下來在WSL建立一個docker image
`docker build.`

3. 接值著從這個image運行一個container
`docker run -p 8080:80 <image_id>`
-p 8080:80 表示將nginx預設的port 80映射到host的port 8080

4. 接著在瀏覽器輸入http://localhost:8080/ 即可看到成功運行的畫面

---

# 將Docker專案串接Travis CI並部屬至AWS

## Travis CI
1. 到[Travis官網](https://www.travis-ci.com/)使用github登入並連結帳號

2. 在資料夾下新增一個.travis.yml的檔案，並新增以下內容

sudo: required
services:
  - docker

before_install:
  - docker build -t <YOUR_DOCKER_USER_NAME>/<APP_NAME> -f Dockerfile.dev .

script:
  - docker run -e CI=true <YOUR_DOCKER_USER_NAME>/<APP_NAME> npm run test

3. 新增後git commit 並push至github

---

## AWS設置
1. 註冊AWS帳號
2. 搜尋**IAM**，並點擊進入IAM service dashboard
3. 點擊側邊欄的**Roles**之後按下右側的**Create role**
4. 選擇**AWS Service**及**EC2**，之後點擊**Next**
5. 搜尋**AWSElasticBeanstalk**並勾選**AWSElasticBeanstalkWorkerTier**及**AWSElasticBeanstalkMulticontainerDocker**，點擊**Next**
6. 將**Role name**命名為 **aws-elasticbeanstalk-ec2-role**
7. 建立完EC2 role後，到service searchbar搜尋**AWS Elastic Beanstalk**
8. 點擊**Create Application**，進入**Step 1 Configure environment**
9. 進行設定
10. 點擊**Next**，進入**Step 2 Configure service access**
11. 選擇**Use an existing service role**，並確認**Existing Service Roles**及**EC2 instance profile**皆有跳出預設選項，如下圖，之後點擊**Skip to Review**
12. 按下**Submit**並等待新的EBS程式及環境建立並運行
13. 回到主控台，搜尋**S3**並進入S3 dashboard
14. 尋找並點擊**elasticbeanstalk bucket**
15. 點擊後進入，並於上方menu切換至**Permissions**，找到**Object Ownership**並按下**Edit**

16. 確認切換至**ACLs enabled**以及**Object writter**，並按下**Save changes**

---

## 更改.travis.yml
.travis.yml新增一些設定後會呈現下圖狀態

- **provider**: elasticbeanstalk <== EBS
- **region**: 'us-east-1'
尋找方式: 進入EBS主控台，點擊左側的**Go to environment**便會在瀏覽器跳出網頁，並複製其網址，大概是:`http://docker-react-env.***-*********.us-east-1.elasticbeanstalk.com/` 其中的**us-east-1**便是region
- **app**: 'EBS_application_name'
- **env**: 'EBS_application_name + -env'
- **bucket_name**: '' <== 搜尋AWS Service 搜尋S3並點擊進入此程式的Bucket，便會出現在上方
- **bucket_path**: 'EBS_application_name' <== 還未部屬的話即為app name
- **on**: branch main <== 此設定代表只有在main push上去時才會自動重新部屬

---

## 設定IAM User及 Keys
1. AWS Service搜尋**IAM**

2. 點擊左側欄**Access Management**下的**Users**

3. 點選左上角**Add Users**

4. 隨意輸入**User Name**欄位後按下**Next**

5. 選取**Attach Policies Directly**，下方搜尋欄搜尋**AdministratorAccess-AWSElasticBeanstalk**，在前方勾選並按**Next**
6. 按下**Create user**

7. 選取剛建立好的**IAM user**

8. 點擊**Security Credentials**，並下滑找到**Access Keys**並點擊**Create access key**
9. 點選**Command Line Interface (CLI)** 並勾選下方的 **I understand...** 並點擊**Next**
10. 複製或下載**Access Key ID** 和 **Secret Access Key** 之後部署時會用到
11. 進入Travis頁面，點擊頁面旁more options內的Settings，在Environment Variable加入剛剛產生的Key，如下圖
12. 回到.travis.yml上新增兩行，在Dockerfile新增一行

// .travis.yml
deploy:
  provider: elasticbeanstalk
  region: 'us-east-1'
  app: 'docker-react'
  env: 'Docker-react-env'
  bucket_name: 'elasticbeanstalk-us-east-1-121144070577'
  bucket_path: 'docker-react'
  on:
    branch: main
    
  access_key_id: '$AWS_ACCESS_KEY'
  secret_access_key: '$AWS_SECRET_KEY'
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

// Dockerfile
FROM node:20-alpine as builder
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx

EXPOSE 80
^^^^^^^^^
COPY --from=builder app/build /usr/share/nginx/html

13. git commit並push上去

---

### CICD開發流程
1. 建立分支`git check -b FEATURE_NAME`
2. 分支完成後commit並推上github`git push origin FEATURE_NAME`
3. 進到Github會看見跳出一個訊息 Compare & pull request並點擊
4. 在comment欄描述此分支所做的改動，之後點擊Create pull request
5. 之後就可見到Travis CI開始進行測試，測試完都successful check後點擊Merge pull request，接著點擊Confirm merge，即完成分支併入主幹。
6. Travis CI偵測到改變，便會重新部署至AWS EBS上。