# How to package Angular project into image and upload to Docker Hub

## Commands


## 1. Environment

- Node v19.4.0
- Angular CLI 16.2.14
- Angular 16.2.12

## 2. Build a Dockerfile at the root of the project

# 使用Node.js作為基礎鏡像
FROM node:19.4.0 as build

# 設置工作目錄
WORKDIR /app

# 複製package.json和package-lock.json
COPY package*.json ./

# 安裝依賴
RUN npm install --legacy-peer-deps

# 複製所有源代碼
COPY . .

# 構建應用
# RUN npm run build -- --prod # Th
RUN npm run build -- --configuration production

# 使用nginx作為最終鏡像
FROM nginx:stable-alpine

# 從build階段複製構建結果到nginx的html目錄
COPY --from=build /app/dist/ninja-frontend /usr/share/nginx/html/

# 暴露80端口
EXPOSE 80

# 啟動nginx
CMD ["nginx", "-g", "daemon off;"]

## 3. Package the project

npm install
npm run build

## 4. Build the image

docker build -t <your-dockerhub-username>/<image-name>:<tag> .

## 5. Push the image to Docker Hub

docker push <your-dockerhub-username>/<image-name>:<tag>

## 6. Pull the image from Docker Hub

docker pull <your-dockerhub-username>/<image-name>:<tag>
# Our Angular is proxy by the Nginx, the default port is 80. In the dockerfile, we've exposed the port 80. So we need to map the port 80 of the container to the port 80 of the host machine.
docker run -p 80:80 <your-dockerhub-username>/<image-name>:<tag>