# anasystem 前端部署到 docker
###### tags: `docker`
## 安裝 docker
[安裝docker](https://www.docker.com/)

## 設定 Harbor
[安研 Harbor](https://iot.senslink.net:5000/harbor/projects)

帳號: rd
密碼: P@ssw0rd

建立項目
名稱: `p110084-web-entrance`

[Harbor 指令教學](https://ithelp.ithome.com.tw/articles/10218046)

## 設定 `daemon.json`

{
  "registry-mirrors": [],
  "insecure-registries": [
    "192.168.116.124",
    "iot.senslink.net:5000"
  ],
  "debug": false,
  "experimental": false,
  "features": {
    "buildkit": true
  },
  "builder": {
    "gc": {
      "enabled": true,
      "defaultKeepStorage": "20GB"
    }
  }
}

## 本地登入

docker login <Your Harbor Domain> or <IP>
docker login https://iot.senslink.net:5000

## 顯示的訊息
Username: admin
Password:
Login Succeeded

## nginx 設定檔
在專案目錄底下建立nginx資料夾，並建立`default.conf`檔案

server {
    listen       80;
    server_name  localhost;
    
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        add_header Cache-Control "public, max-age=63072000";
        add_header Vary Accept-Encoding;
        access_log off;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

## 設定 dockerfile
在專案目錄底下建立`Dockerfile`
:::warning
根據 `publicPath` 改動下方 `admin` 位置
:::

FROM nginx

ENV TZ=Asia/Taipei
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

COPY dist/ /usr/share/nginx/html/admin
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

## 執行 docker 指令
在專案目錄底下建立`images.sh`

:::warning
name 跟 `Harbor` 新建的項目一樣
version 每次都會進版，需要跟後端告知
:::

name=p110084-web-admin
version=1.1.4

docker rmi rd/$name -f
docker build -t rd/$name:$version .
docker tag rd/$name:$version iot.senslink.net:5000/$name/repo:$version
docker push iot.senslink.net:5000/$name/repo:$version

## `package.json` 新增 script

"scripts": {
        ...
		"docker": "images.sh"
	},

## 專案部署

npm run build

npm run docker