iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 26
0

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
https://ithelp.ithome.com.tw/upload/images/20200926/200726515yZEgvyl7z.png

Azure Container Registry

查看 az acr 官方指令說明

查看 az acr 指令說明

az act -h

https://ithelp.ithome.com.tw/upload/images/20200926/20072651tFu1geCtZE.png
https://ithelp.ithome.com.tw/upload/images/20200926/20072651bBZdLT80j4.png

查看 az acr create 指令說明

az acr create -h

https://ithelp.ithome.com.tw/upload/images/20200926/200726511UqlAoWgx5.png
https://ithelp.ithome.com.tw/upload/images/20200926/20072651StxfWIzpSD.png

創建 Registry

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

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

https://ithelp.ithome.com.tw/upload/images/20200926/200726514BnxavnNpU.png

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

設定登入

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

https://ithelp.ithome.com.tw/upload/images/20200926/20072651M4MVFecZdE.png

登入 Azure Registry

az acr login --name pellokregistry

https://ithelp.ithome.com.tw/upload/images/20200926/20072651V49g9fEqp4.png

標記 Docker Image

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

上傳 Docker Image

docker push pellokregistry.azurecr.io/pellok:v1

https://ithelp.ithome.com.tw/upload/images/20200926/20072651BSrX9CnchR.png

部署成 WebApp

創建 AppService Plan

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

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

https://ithelp.ithome.com.tw/upload/images/20200926/20072651i1h7Y2YUQ2.png

創建 WebApp

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

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

https://ithelp.ithome.com.tw/upload/images/20200926/20072651yauXGBLNB7.png

更新 WebApp 使用 Container Image

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

https://ithelp.ithome.com.tw/upload/images/20200926/20072651X7h5QE6Rfq.png

檢查

https://ithelp.ithome.com.tw/upload/images/20200926/20072651Laq8ONlhKq.png

檢查網站

https://ithomefrontendweb.azurewebsites.net/
https://ithelp.ithome.com.tw/upload/images/20200926/20072651zb1eyXS2a5.png

相關連結:

上一篇 Day25 專案的 Azure Pipeline 部署到 Azure 平台
下一篇 Day27 Azure Blob 儲存體文件


上一篇
Day25 專案的 Azure Pipeline 部署到 Azure 平台
下一篇
Day27 Azure Blob 儲存體文件
系列文
Azure 的自我修煉30

尚未有邦友留言

立即登入留言