ついに!App Service F1(Freeプラン)を発見!

App Service F1(Freeプラン)がない!!

App Serviceは10インスタンス「いつでも無料」のはずなのに、リソースが作れなかった。 ※結局のところ、1週間探しまくった。

いつでも無料のはずなのに。。。

ない!ない!ない!

F1プランはWindowsのみ!

App Service の価格@Microsoft Azureで構成を切り替えたところ、F1プランを発見! 正直、わかりにくいし、Linuxが良かったのにな、と思ってしまう。

Windows版にあるじゃないか!

Linux版にはない

App Service F1プランのリソースの作りかた

  1. App Service リソースを選択する

    リソースの選択

  2. OSでWindowsを選ぶ

    リソースプロパティの設定

  3. App Service プランで「新規作成」を選択する

    プラン選択

  4. 価格レベルを選択する

    プランプロパティの設定

  5. F1プランを指定する

    F1プランを指定

  6. 「適用」ボタンを押下する

参考

Hello Vuetify

Vuetifyのはじめの一歩

Bootstrapを使っていたのですが、他のUIフレームワークも使って見たいので、「Vue.js + vuetify + vue-cli でマテリアルデザインにトライ!」を見ながら、作業する。

vue-cliはインストールされている前提:

  1. プロジェクトを作成する

    • プロジェクトへの質問はデフォルトで良い
    $ vue init webpack-simple vuetify-test
    ? Project name vuetify-test
    ? Project description A Vue.js project
    ? Author shoko_kb <*********@gmail.com>
    ? License MIT
    ? Use sass? No
    
       vue-cli · Generated "vuetify-test".
    
       To get started:
           
         cd vuetify-test
         npm install
         npm run dev
    
  2. パッケージをインストールする

    $ cd vuetify-test/
    $ yarn install
    success Saved lockfile.
    ✨  Done in 172.19s.
    
  3. 動作確認

    $ yarn run dev
    yarn run v1.6.0
    warning ../../../package.json: No license field
    $ cross-env NODE_ENV=development webpack-dev-server --open --hot
    Project is running at http://localhost:8080/
    webpack output is served from /dist/
    404s will fallback to /index.html
    

    Vuetify 初期表示

  4. Vuetifyを追加する

    $ yarn add vuetify 
    
  5. main.jsにimport vuetifyを追加する

    import Vue from 'vue'
    import App from './App.vue'
    
    // ---- ここから追加 ---//
    import Vuetify from 'vuetify'
    import 'vuetify/dist/vuetify.min.css'
    
    Vue.use(Vuetify)
    // ---- ここまで追加 ---//
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })
    
    
  6. index.html にマテリアルアイコンを追加する

    <head>
        <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
    </head>
    
  7. App.vueにチェックボックスとカレンダーを追加してみる

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <h1>{{ title }}</h1>
        <!--h2>Essential Links</h2>
        <ul>
          <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
          <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
          <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
          <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
        </ul>
        <h2>Ecosystem</h2>
        <ul>
          <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
          <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
          <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
          <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
        </ul-->
        <v-layout row wrap>
          <v-flex sm3>
            <v-checkbox hide-details label="Landscapes" v-model="landscapes"></v-checkbox>
          </v-flex>
          <v-flex sm3>
            <v-checkbox hide-details label="Reactive" v-model="reactive"></v-checkbox>
          </v-flex>
        </v-layout>
        <v-date-picker v-model="picker" :landscape="landscape" :reactive="reactive"></v-date-picker>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          title : 'My Vuetify Hello World',
          msg: 'Welcome to Your Vue.js App',
          picker: null, //new Date('2018-09-01'),
          landscape: false,
          reactive: false
        }
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    
    h1, h2 {
      font-weight: normal;
    }
    
    ul {
      list-style-type: none;
      padding: 0;
    }
    
    li {
      display: inline-block;
      margin: 0 10px;
    }
    
    a {
      color: #42b983;
    }
    </style>
    

    Vuetify Hello World

    • カレンダーの日付をクリックすると数字が消える(用調査)

参考

マテリアルデザインとは

既存のプロジェクトに埋め込むには

Chrome「localhost:8080」問題

Chromeで「localhost:8080」がはねられる

  • Safariでは正常に動作が確認できる。
  • コンソールでcurlを叩いても正常にアウトプットが表示される。
  • Chromeのキャッシュをクリアしても現象が解消しない。

→ したがって、どうやら、Chromeの問題と判断できる。

  • 次のURLをChromeに入力して実行すると、DNSの古いキャッシュが消える。
  • Chromeのメニューからのキャッシュクリア時に、DNSの古いキャッシュは消えないらしい。
  • URL = chrome://net-internals/#dns

参考