Corredor

ウェブ、プログラミングの勉強メモ。

Zeit Now を使ってみた。GitHub 連携したら Vue のデプロイも now.json 不要だった

Zeit という企業が提供する、NOW というウェブサービスがある。当初はゼロコンフィグで静的サイトをデプロイできる、とかいう話で Netlify みたいな感じのサービスだったと思うのだが、最近見てみたら V2 (第2世代) となっていて、Node.js や Python などのプログラムも動作するようになっていた。Heroku よりもさらにお手軽に使える PaaS になっているっぽい。サービス名のググラビリティが低いので、ココでは Zeit Now v2 と表現する。

今回はこの Zeit Now v2 を使って、Vue プロジェクトをビルドし、静的サイトとしてデプロイしてもらおうと思う。Zeit Now のアカウントを登録するところから紹介する。

Zeit Now に登録する

まずは Zeit Now に登録する。

サイトに移動して「Join Free」ボタンを押下。

f:id:neos21:20190922215150p:plain

「Continue With GitHub」ボタンを押下すると、GitHub アカウントと連携する形で Zeit Now のアカウントが用意される。

f:id:neos21:20190922215158p:plain

f:id:neos21:20190922215202p:plain

f:id:neos21:20190922215206p:plain

連携したら初期設定やプロフィールを入れていく。

f:id:neos21:20190922215210p:plain

f:id:neos21:20190922215215p:plain

f:id:neos21:20190922215219p:plain

f:id:neos21:20190922215229p:plain

f:id:neos21:20190922215235p:plain

f:id:neos21:20190922215240p:plain

ココまで到達できれば登録は OK。

Git Integration (連携) 機能を使って GitHub リポジトリの内容をデプロイする

コード作成済みの GitHub リポジトリがあって、あとは Zeit Now に任せてゼロコンフィグでデプロイしたい、という場合は、このまま画面上で作業していくだけでデプロイが完了する。

Zeit Now の画面で「New Project」のプルダウンを選択し、「From GitHub」を選択する。

f:id:neos21:20190922215249p:plain

すると自分の GitHub リポジトリ一覧が表示されるので、任意のリポジトリを選択する。

f:id:neos21:20190922215254p:plain

すると、Zeit Now がリポジトリの内容を取得し、自動的にプロジェクトの言語やフレームワークを特定、イイカンジにビルド・デプロイが行われる。

f:id:neos21:20190922215258p:plain

f:id:neos21:20190922215304p:plain

初期設定のままだと、

  • https://【プロジェクト名】-【ランダム文字列】.now.sh

という URL でデプロイされる。このような URL は、GitHub のコミットごとや、後で紹介する Zeit Now CLI を使う度に、URL が自動生成されて作られる。平たくいうと、コミットごとに別々の URL を持った GitHub Pages ができる感じ。

f:id:neos21:20190922215310p:plain

コレとは他に、

  • https://【プロジェクト名】-git-master.【アカウント名】.now.sh

という URL も出来る。Git Integration を使い、ブランチ名が含まれるという URL になる。コチラはそのプロジェクトで最新のビルド・デプロイ先を参照するエイリアスになっている。

過去のデプロイは URL が異なるので全て残っている。勿論古いデプロイを削除することもできる。

Zeit Now CLI を使ってデプロイしてみる

ココまでで、やりたかったデプロイは出来てしまったのだが、あまりにもゼロコンフィグすぎて、少しくらい自分が意図したとおりに設定ファイルを書いて安心したい気持ちがある。

そこで、Git Integration 機能を使わず、Zeit Now CLI を使ってデプロイをしてみる。

Zeit Now CLI は npm でインストール可能。グローバルインストールする。

$ npm install -g now

次に、CLI でアカウントにログインするため、$ now login コマンドを実行する。

$ now login
(node:15852) ExperimentalWarning: The http2 module is an experimental API.
> We sent an email to 【メールアドレス】. Please follow the steps provided
  inside it and make sure the security code matches Snowy Liger.
√ Email confirmed
> Congratulations! You are now logged in. In order to deploy something, run `now`.

メールアドレスを入れると、そのメール宛に確認のメールが飛ぶ。そのメールから Velify すると、動的にコマンドラインが進んでログインが完了する。

now.json を書いてみる

Zeit Now にデプロイするための設定は、.now.json というファイルをプロジェクトルートに用意し、そこに書き込んでいく。

何をどう書いたら良いのか、公式のガイドを見てもイマイチ分からなかったので、見様見真似で書いてみた結果を記す。

now dev を使う

Vue のプロジェクトがあるディレクトリのルートに、こんな設定ファイルを置いた。

  • now.json
{
  "version": 2,
  "name": "practice-vue",
  "alias": "practice-vue.neos21.now.sh"
}
  • version : Zeit Now の v2 系を使うため 2 を指定
  • name : プロジェクト名
  • alias : エイリアスとなる URL。now.sh まで含めて書く。アカウントを作ってあるので、【アカウント名】.now.sh と書いている

まずは $ now dev というコマンドで、ローカル開発サーバを立てて動作確認できるようなので、コレを試してみる。

Vue Build ($ npm run build) してから、./dist/ ディレクトリを指定して開いてみる。

$ npm run build

$ now dev ./dist/
(node:3500) ExperimentalWarning: The http2 module is an experimental API.
> Now CLI 16.2.0 dev (beta) — https://zeit.co/feedback/dev
> NOTE: Serving all files as static
> Ready! Available at http://localhost:3000

コレで http://localhost:3000/ で Vue のページが開いた。

初めての $ now

now.json にもう少し書き加えて、package.json を見つけてうまくビルドしてくれ、という内容を書いてみる。

{
  "version": 2,
  "name": "practice-vue",
  "alias": "practice-vue.neos21.now.sh",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ]
}

ビルド結果は ./dist/ ディレクトリに吐かれるので、それを指定している。routes プロパティがなくていいのか分からない。

@now/static-build を使うと、package.json の中の now-build という名前の npm-run-scripts を自動実行してくれる。ということで package.jsonnow-build スクリプトを定義しておこう。

  • package.json
{
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "now-build": "npm run build"
  }
}

コレで $ now dev としてみたが、$ now devnow.json を読み込んだ形跡がなく、動きが変わらなかった。

$ now dev
(node:7600) ExperimentalWarning: The http2 module is an experimental API.
> Now CLI 16.2.0 dev (beta) — https://zeit.co/feedback/dev
> Creating initial build

# コレでコンソールが終了してしまう

ということで、$ now dev する時は事前に $ npm run build して $ now dev ./dist/ とするしかなさそう。

それじゃあ仕方ない、ということでいよいよ $ now コマンドでデプロイしてみる。

$ now
(node:17304) ExperimentalWarning: The http2 module is an experimental API.
> Deploying C:\Neos21\practice-vue under neos21
> Using project practice-vue
> Synced 2 files (1.27KB) [514ms]
> https://practice-vue-tkg1kf9pf.now.sh [v2] [863ms]
> Ready! Deployed to https://practice-vue.neos21.now.sh [in clipboard] [2m]

routes プロパティを書いていないが、コレで上手くデプロイされていた。

f:id:neos21:20190922215314p:plain

再度 Git Integration を有効にしてみる

Zeit Now CLI で作ったプロジェクトに対し、また Git Integration で GitHub リポジトリ連携してみた。その上で git push してみたところ、Zeit Now のプロジェクトページで Build ログが見られた。

installing build runtime...
build runtime installed: 837.717ms
obtaining caches...
missing `engines` in `package.json`, using default range: 8.10.x
installing to /tmp/403d1885
yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
warning @vue/cli-plugin-eslint > eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > sass-loader@7.3.1" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 45.45s.
running "yarn run now-build"
yarn run v1.17.3
$ npm run build
npm
 
WARN lifecycle The node binary used for scripts is /tmp/yarn--1568727154064-0.21926342155500111/node but npm is using /node8/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> practice-vue@0.0.0 build /tmp/403d1885
> vue-cli-service build


-  Building for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.2.1 <3.6.0

YOUR TYPESCRIPT VERSION: 3.6.3

Please only submit bug reports when using the officially supported version.

=============
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.2.1 <3.6.0

YOUR TYPESCRIPT VERSION: 3.6.3

Please only submit bug reports when using the officially supported version.

=============
 WARNING  Compiled with 2 warnings13:33:05

 warning  

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  js/chunk-vendors.d524f53c.js (501 KiB)

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (951 KiB)
      css/chunk-vendors.e660d170.css
      js/chunk-vendors.d524f53c.js
      css/app.66c18c29.css
      js/app.61fa0a97.js


  File                                   Size              Gzipped

  dist/js/chunk-vendors.d524f53c.js      500.82 KiB        140.61 KiB
  dist/js/app.61fa0a97.js                9.20 KiB          3.18 KiB
  dist/js/about.d8e476a7.js              1.61 KiB          0.81 KiB
  dist/css/chunk-vendors.e660d170.css    222.81 KiB        29.95 KiB
  dist/css/app.66c18c29.css              217.84 KiB        25.21 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
      
Done in 32.80s.
done
done

大変長ったらしいが、途中で running "yarn run now-build" と出力されているように、package.json に書いた now-build スクリプトが動いていることが分かる。上手くビルド・デプロイされた。

routes を書いてみる

now.json にルーティング定義を書いてみる。

{
  "version": 2,
  "name": "practice-vue",
  "alias": "practice-vue.neos21.now.sh",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/dist/$1" }
  ]
}

念のためローカルで ./dist/ ディレクトリは削除しておき、Zeit Now 上でビルドがされることを確認できるようにした。

この内容で $ now してみた。デプロイは完了し、Vue アプリが表示されたので、Zeit Now 上でビルドされたモノが参照できているようだ。

マジでゼロコンフィグかよ…

f:id:neos21:20190922215318p:plain

f:id:neos21:20190922215322p:plain

何か色々試したけど、now.json で指定したいのは alias の URL くらいで、ビルドもルーティングも、Zeit Now に自動認識させてうまいことやってもらう内容で十分だ。少なくとも Vue プロジェクトは何も考えずにデプロイできてしまった。

Git Integration 機能で GitHub 連携している時は、もはや $ now コマンドすら不要で、$ git push すれば自動的にビルド・デプロイされるので、ホントに何の管理も必要ない、夢のゼロコンフィグが実現されていた。

なお、今回 Zeit Now にデプロイしたプロジェクトは以下。2つの URL はいずれも最新のコミットからビルドされている。

GitHub リポジトリは以下。

参考文献

Zeit! 77-79

Zeit! 77-79

.gitattributes ファイルで改行コードを制御できる

.gitattributes ファイルを置いておくと、各自が ~/.gitconfigcore.autocrlf を設定していなくても、リポジトリ内の改行コードの扱いを統一できる。

$ man gitattributes で確認できる公式サンプルの読み方。

*         text=auto      # 全てのファイルのうち、テキストと判断したファイルは LF に変換する
*.txt     text           # .txt ファイルは改行コード変換を行う (上のアスタリスク * 指定に倣うので LF に変換する)
*.vcproj  text eol=crlf  # .vcproj ファイルは強制的に CRLF に変換する
*.sh      text eol-lf    # .sh ファイルは強制的に LF に変換する
*.jpg     -text          # .jpg ファイルはテキストとして解釈しない

*.jpg -text は安心のため入れてある感じ。なくても大概の場合は問題ないが、バイトコード中に CR に合致するコードが見つかった時にうっかり LF にされないようにしている。

とりあえず LF に揃えたいならこんな感じでいいんじゃないかな。特に text eol=lf という明示は要らないかと。

  • .gitattributes
*        text=auto
*.jpg    -text
*.gif    -text
*.png    -text

この .gitattributescore.autocrlf の変換タイミングは、git commit 時 (正確には git add 時か) と git checkout 時に行われる。

よくわかる入門Git

よくわかる入門Git

サルでもわかるGit入門

サルでもわかるGit入門

  • 作者: 大串肇,アクツユミ,一戸健宏,兼清慮子,齋木弘樹,清野奨,福嶌隆浩,株式会社ヌーラボ
  • 出版社/メーカー: インプレス
  • 発売日: 2018/09/25
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

BootstrapVue:Vue CLI 3 で Bootstrap 4 を使う

Vue CLI 3 で作った環境に、Bootstrap 4 を入れて使ってみたい。静的なスタイル適用だけであれば、Bootstrap 4 自体を導入して SCSS を読み込めば良いだろうが、jQuery に依存している動的な一部機能が使えない。

Angular だと ngx-bootstrap などの Bootstrap ラッパーがあるのだが、Vue の場合は BootstrapVue というラッパーツールがあり、コレを使うのが良さそうだ。

今回は Vue CLI (@vue/cli) でプロジェクトの雛形を作り、そこに BootstrapVue をプラグインとして導入してみようと思う。

Vue プロジェクトの雛形を作成する

まずは @vue/cli でプロジェクトの雛形を作ろう。

# Vue CLI のインストール
$ npm install -g @vue/cli

# Vue プロジェクトを作る
$ vue create my-bootstrap-vue

特に凝った構成にはしておらず、TypeScript を有効にしたくらい。

BootstrapVue をインストールする

BootstrapVue の導入方法は色々あるが、Vue CLI で作ったプロジェクトだと、$ vue add というプラグイン追加のコマンドを使うのが楽そうだった。

# 以下で BootstrapVue を入れる
$ vue add bootstrap-vue

�📦  Installing vue-cli-plugin-bootstrap-vue...

+ vue-cli-plugin-bootstrap-vue@0.4.0
added 1 package from 1 contributor and audited 34402 packages in 7.856s
found 0 vulnerabilities

✔  Successfully installed plugin: vue-cli-plugin-bootstrap-vue

? Use babel/polyfill?  Yes  # ココだけ「Yes」と答える

�🚀  Invoking generator for vue-cli-plugin-bootstrap-vue...
�📦  Installing additional dependencies...


> bootstrap-vue@2.0.1 postinstall C:\Neos21\Dev\Sandboxes\my-bootstrap-vue\node_modules\bootstrap-vue
> opencollective || exit 0

                       ;XXXXXXXXXXXX333333333XXXXXXXXXXXXX; 
                        :2XXXXXXXXXXSisssssiSXXXXXXXXXXX2:  
                       .;S3XXXXXXXXX, .,,,,..,SXXXXXXXX3S;, 
                      .:SX2222XXXXXX, :XXXXS. r3XXXX2222X2;.
                      .riiiiii5XXXXX, .;;;;, :2XXXX5iiiiiir.
                        ;iiiiiiSXXXX, ,rrrr;,.;XXXSiiiiii;  
                         ;iiiiiiS2XX, ;3333X; .2XSiiiiii;   
                          :siiiiii2X, .::::,..r2iiiiiis:    
                           ,siiiiii2isrrrrrsi22iiiiiis,     
                            ,riiiiii23333333X2iiiiiir,      
                             .riiiiii5XXXXXX5iiiiiir.       
                              .;iiiiiiSXXXXSiiiiii;.        
                                ;iiiiiiSXXSiiiiii;
                                 :siiiiiiiiiiiis:
                                  ,siiiiiiiiiis,
                                   ,riiiiiiiir,
                                    .riiiiiir.
                                     .;iiii;.
                                       ;ii;
                                        ;;

                       Thanks for installing bootstrap-vue 
                 Please consider donating to our open collective
                        to help us maintain this package.

                           Number of contributors: 230
                              Number of backers: 41
                             Annual budget: US$ 1,066
                            Current balance: US$ 1,525

          Donate: https://opencollective.com/bootstrap-vue/donate

added 10 packages from 16 contributors and audited 34424 packages in 8.938s
found 0 vulnerabilities

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-bootstrap-vue
   The following files have been updated / added:

     src/plugins/bootstrap-vue.js
     babel.config.js
     package.json
     src/main.ts

   You should review these changes with git diff and commit them.

こんな感じでインストールできた。

最後に出てきた4ファイルが追加・更新されたモノ。Bootstrap 本体の SCSS や BootstrapVue が追加されている。

Bootstrap が使えるか確認する

適当な .vue ファイルを開き、HTML に以下のように書いてみる。

<b-alert show>Default Alert</b-alert>

そしたら $ npm run serve で開発サーバを起動し、ページを開いてみる。

Bootstrap の Alert コンポーネント (色の付いた枠の要素) が表示されていれば、うまく BootstrapVue が適用できている。

BootstrapVue コンポーネントからのリンクはどう書く?

NavBar コンポーネントなど、Bootstrap コンポーネントからリンクを貼るタイプのモノの実装方法が、リファレンスからだとよく分からなかったので、調べてみた。

例えば <b-nav-item> などは、NavBar の1項目を表すコンポーネントなので、コレ自体にリンクを貼りたい。どうしたらいいかというと、Vue Router の <router-link> 要素と同じく to 属性で書ける。

<!-- NavBar 全体。色付け・下マージンなど -->
<b-navbar toggleable="lg" type="dark" variant="primary" class="mb-3">
  <b-navbar-brand href="#">タイトル</b-navbar-brand>
  
  <!-- 幅が狭い時に表示されるハンバーガーメニューアイコン・target 属性で開閉したい要素の id を指定する -->
  <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
  
  <!-- b-collapse に is-nav を付けておくと親要素のブレイクポイントで閉じられるようになる -->
  <b-collapse is-nav id="nav-collapse">
    <b-navbar-nav>
      <b-nav-item to="/"      exact-active-class="active">Home</b-nav-item>
      <b-nav-item to="/about" exact-active-class="active">About</b-nav-item>  <!-- exact と active-class を別々に付与することもできる -->
    </b-navbar-nav>
  </b-collapse>
</b-navbar>

<b-nav-item to="/"> と実装したとおり。<router-link to="/"> と書いたのと同じだ。

開いているページのリンクを明るくするには active という CSS クラスを指定したいが、exact-active-class 属性を使うと、パスが完全一致した時に付与する CSS クラス名を指定できる。

<b-nav-item to="/about" exact active-class="active">About</b-nav-item>

こんな風に exact 属性と active-class 属性とを併用しても良い。

以上

その他、BootstrapVue のコンポーネントは公式サイトのリファレンスを参照して欲しい。

Angular における ngx-bootstrap と似たようなノリで使えて良い感じ。

Vue の練習は以下のリポジトリでやっているので、よかったらドウゾ。

github.com

Zeit Now にデプロイしてみたので、以下のいずれかの URL で動作しているモノを見られる。

Vue.jsのツボとコツがゼッタイにわかる本

Vue.jsのツボとコツがゼッタイにわかる本

WPScan を使ってみる

WordPress で作ったサイトの脆弱性をチェックできる、WPScan というツールを試してみた。

Docker 環境があると、面倒なインストール作業をすっ飛ばして実行できるので、Docker を使うのが良いだろう。

$ docker run -it --rm wpscanteam/wpscan --url 'http://example.com/'

こんな感じ。

--rm は、EntryPoint のプロセスが終了したり exit したりすると、自動的にコンテナを破棄するオプション。--url オプションに調べたいサイトの URL を渡すと良い。

管理画面からログインできそうなユーザを探すには以下のようにする。

$ docker run -it --rm wpscanteam/wpscan --url 'http://example.com/' -e u

簡単に WordPress 製のサイトの問題点が分かる他、ココから先、辞書を利用した総当たりでの管理画面ログイン攻撃を仕掛けたりもできてしまう。ご利用は計画的に。

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)

WordPressレッスンブックHTML5&CSS3準拠

WordPressレッスンブックHTML5&CSS3準拠