Day26 Azure Container Registry (ACR)服務

第 12 屆 iThome 鐵人賽

DAY 26

Microsoft Azure

Azure 的自我修煉系列第 26 篇

12th鐵人賽 container vue azure container registry webapp

pellok

2020-09-26 23:26:35

1694 瀏覽

Azure Container Registry 服務

Vue 專案

我們使用 Vue官方教學還實作一個前端網站。
Vue 可以使用CDN的方式在靜態網頁使用，可以使用 vue-cli 來開發，
我們先使用CDN的方式

起步

# 正式環境
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
# 開發環境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

宣告VUE

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Index.html

原始碼網頁

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>PellokITHome2020</title>
</head>

<body>
  <div id="app">
      <div class="jumbotron text-center">
          <h1>{{ title }}</h1>
          <h3><a href="{{subject_link}}">{{subject}}</a></h3>
      </div>
      <div class="container">
          <!-- <div class="row"> -->
            <ul class="list-group list-group-flush" v-for="article in articles">
              <li class="list-group-item">
                <h4><a href="{{article.link}}">{{article.name}}</a></h4>
              </li>
            </ul>
          <!-- </div> -->
      </div>
    </div>
</body>
<script>
var app = new Vue({
    el: '#app',
    data: {
        title: '第12屆鐵人賽',
        subject: 'Azure 的自我挑戰',
        subject_link: 'https://ithelp.ithome.com.tw/users/20072651/ironman/3347',
        articles: [
          {'name': 'Day01 Azure 的自我修煉', 'link': 'https://ithelp.ithome.com.tw/articles/10233277'},
          {'name': 'Day02 申請Azure帳號', 'link': 'https://ithelp.ithome.com.tw/articles/10233285'},
          {'name': 'Day03 Resource Group 資源群組', 'link': 'https://ithelp.ithome.com.tw/articles/10233371'},
          {'name': 'Day04 Dotnet Core 專案', 'link': 'https://ithelp.ithome.com.tw/articles/10233562'},
          {'name': 'Day05 MVC專案建置', 'link': 'https://ithelp.ithome.com.tw/articles/10233621'},
          {'name': 'Day06 專案 Git 版本控制', 'link': 'https://ithelp.ithome.com.tw/articles/10233743'},
          {'name': 'Day07 WebApp服務-原始碼部署', 'link': 'https://ithelp.ithome.com.tw/articles/10234003'},
          {'name': 'Day08 Azure SQL 服務', 'link': 'https://ithelp.ithome.com.tw/articles/10234196'},
          {'name': 'Day09 實作官網 ASP.NET Core 教學(一)', 'link': 'https://ithelp.ithome.com.tw/articles/10234296'},
          {'name': 'Day10 實作官網 ASP.NET Core 教學(二)', 'link': 'https://ithelp.ithome.com.tw/articles/10234907'},
          {'name': 'Day11 實作官網 ASP.NET Core 教學(三)', 'link': 'https://ithelp.ithome.com.tw/articles/10234646'},
          {'name': 'Day12 實作官網 ASP.NET Core 教學(四)', 'link': 'https://ithelp.ithome.com.tw/articles/10235173'},
          {'name': 'Day13 部署 Webapp 使用 SQL服務', 'link': 'https://ithelp.ithome.com.tw/articles/10235750'},
          {'name': 'Day14 實作 ASP.NET Core 建立 Web API', 'link': 'https://ithelp.ithome.com.tw/articles/10235984'},
          {'name': 'Day15 網頁基礎知識', 'link': 'https://ithelp.ithome.com.tw/articles/10237354'},
          {'name': 'Day16 實作官網教學 JavaScript 呼叫 ASP.NET Core web API', 'link': 'https://ithelp.ithome.com.tw/articles/10236833'},
          {'name': 'Day17 實作 Identity ASP.NET Core', 'link': 'https://ithelp.ithome.com.tw/articles/10238429'},
          {'name': 'Day18 Azure Pipelines服務', 'link': 'https://ithelp.ithome.com.tw/articles/10238538'},
          {'name': 'Day19 Azure Pipelines服務 YAML 說明與設定', 'link': 'https://ithelp.ithome.com.tw/articles/10239784'},
          {'name': 'Day20 實作 Dotnet Test 測試範例', 'link': 'https://ithelp.ithome.com.tw/articles/10239929'},
          {'name': 'Day21 實作 Razor ASP.NET Core 中的頁面單元測試', 'link': 'https://ithelp.ithome.com.tw/articles/10240870'},
          {'name': 'Day22 整合CI測試到 Azure Pipeline 服務', 'link': 'https://ithelp.ithome.com.tw/articles/10242197'},
          {'name': 'Day23 介紹 Azure Resource Manager (ARM) 範本', 'link': 'https://ithelp.ithome.com.tw/articles/10242739'},
          {'name': 'Day24 實作 Azure Resource Manager 範本與 Azure Pipelines 的持續整合', 'link': 'https://ithelp.ithome.com.tw/articles/10242860'},
          {'name': 'Day25 專案的 Azure Pipeline 部署到 Azure 平台', 'link': 'https://ithelp.ithome.com.tw/articles/10243798'},
        ],
    }
})
</script>

</html>

Container 容器

之前有寫一篇 Docker 基本教學大家可以前往查看喔。

創建Dockerfile

FROM nginx
RUN mkdir /app
COPY index.html /usr/share/nginx/html/index.html

打包成 Image

docker build . -t pellok:v1

執行容器

docker run -d -p 8080:80 --name pellok pellok:v1

測試

http://localhost:8080

Azure Container Registry

查看 az acr 官方指令說明

查看 az acr 指令說明

az act -h

查看 az acr create 指令說明

az acr create -h

創建 Registry

資源群組: PellokIThomePipelineRG
Registry名稱: PellokRegistry
使用資源: Basic

az acr create -n PellokRegistry -g PellokIThomePipelineRG --sku Basic

創建完成會有一個 "loginServer": "pellokregistry.azurecr.io"，後續會使用到。

設定登入

az acr update -n pellokregistry -g PellokIThomePipelineRG --admin-enabled true

登入 Azure Registry

az acr login --name pellokregistry

標記 Docker Image

docker tag pellok:v1 pellokregistry.azurecr.io/pellok:v1

上傳 Docker Image

docker push pellokregistry.azurecr.io/pellok:v1

部署成 WebApp

創建 AppService Plan

資源群組: PellokIThomePipelineRG
Plan名稱: ITHomeFrontendPlan
--is-linux: 使用Linux
--sku: B1

az appservice plan create -g PellokIThomePipelineRG -n ITHomeFrontendPlan --is-linux --sku B1

創建 WebApp

資源群組: PellokIThomePipelineRG
Plan名稱: ITHomeFrontendPlan
WebApp名稱: ITHomeFrontendWeb
部署服務: "NODE|12.9"

az webapp create -g PellokIThomePipelineRG -p ITHomeFrontendPlan -n ITHomeFrontendWeb -r "NODE|12.9"

更新 WebApp 使用 Container Image

az webapp config container set --name ITHomeFrontendWeb -g PellokIThomePipelineRG -i pellokregistry.azurecr.io/pellok:v1

檢查

檢查網站

https://ithomefrontendweb.azurewebsites.net/

尚未有邦友留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙

Azure 的自我修煉系列 第 26 篇