2020-02-06に投稿

Vue.js+Netlifyで最小のアプリを作る

Vue.jsで最小のアプリケーションを作成して、Netlifyにデプロイするまでを解説します。1週間以内くらいで1ページだけの簡単なWebアプリケーションを作ろう、と思ったらこれくらいで十分可能です。複雑なアプリケーションにしなければデータベースもブラウザ上のLocal Storageに保存する形であれば用意する必要もありませんし、とても楽です。

準備するもの

今回の最小のアプリケーションを作成するためには下記の準備が必要です。インストールやユーザー登録をしておきましょう。

npmのインストール
Yarn(好みで必要であれば)
GitHubのユーザー登録
Netlifyのユーザー登録

Vue CLI

まずはPCにVue CLIをインストールします。Vue CLIを利用すると、コマンドで簡単にVue.jsのプロジェクトを作成できるようになります。インストール方法は下記のどちらかのコマンドです。

npm install -g @vue/cli

もしくは

yarn global add @vue/cli

プロジェクトを新規作成

Vue CLIを使ってVue.jsのプロジェクトを新規登録します。下記のコマンドを実行します。

vue create hello-world

するとプロジェクトにどのような機能を入れるかを選択しながら作成することが出来ます。必要なものを選択していきます。よく分からない場合は最初にdefaultを選択しておけば良いと思います。

例として、僕はManually select featuresで下記を選択しました。

Check the features needed for your project

Babel, TypeScript, Linter/Formatter, Unit Testing, E2E Testing

TypeScriptと2つのTestingを追加しました。1ページの軽いアプリケーションなのでRouterは選択しませんでした。Testingは今回は使いませんが、もし使うことになった際に一から設定するのは面倒なのでとりあえず雛形を作ってもらっておいたほうが楽かなと思いいつも追加しています。とりあえずシンプルなアプリケーションを作るだけであれば不要でしょう。

Use class-style component syntax?

Vueコンポーネントの使い方が変わります。好きな形を選択しましょう。Vue.js3でまた新しいカタチも出てくるのですがまだ選択できませんのでとりあえず好きなもので良いと思います。シンプルなアプリケーション用ですのであまり考える必要はないでしょう。

Use Babel alongside TypeScript

TypeScriptの場合? だけでしょうか。そのままYで良いと思います。

Pick a linter / formatter config

これもLinter/Formatterを選択している場合だけでしょうか。TSLintはもう使わないほうが良いのでそれ以外であれば好きなのを選べば良いと思います。僕はPrettierを選んでいます。

Pick additional lint features

いつLintするかの設定です。とりあえずLint on saveで良いと思います。

Pick a unit testing solution

Unitテストで利用するパッケージの選択です。GitHubでのスター数が多いので適当にいつもJestにしています。

Pick a E2E testing solution

同上でcypressを選択しました。

Where do you prefer placing config for Babel, ESLint, etc.?

いろんな設定がpackage.jsonに詰め込まれるのは嫌なのでIn dedicated config filesにしました。

Save this as a preset for future projects?

最後にこの設定を今後も使うかの選択です。怖いのでそのままNにしました。

これで完了です。待っていれば先程指定したアプリケーション名のフォルダにプロジェクトが作成されます。E2Eテストとかを入れているとかなり時間がかかるかもしれません。

問題なければ最後に表示されるように、cdコマンドでフォルダ内に移動し、serveコマンドを実行すればもうアプリケーションが実行できます。

cd vue-netlify-sample
yarn serve

問題なければURLが表示されるのでアクセスすれば表示されます。

Gitにコミットする

とりあえずプロジェクトを作成した直後の状態をGitにコミットしておくと良いでしょう。通常はgit initする必要がありますが、Vue CLIの場合はそれもやってくれているっぽいのでそのままコミットできます。git addも必要ですがそれもやってくれているっぽいので、例えばVSCodeの場合はそのままメッセージを入力してコミットできるっぽいです。

GitHubにリポジトリをpushする

さきほど作成したリポジトリとそのコミットを、GitHubのリモートリポジトリに登録します。まずは新しいリポジトリをGitHub上に作成します。

設定はこんな感じです。名前だけ入力するだけで大丈夫です。公開したくなければPrivateを選択しておきましょう。

image.png

新規作成できると、空のリポジトリが作成されます。この状態ではリポジトリの初期化方法が色々と書かれています。その中に既存のローカルリポジトリを使う方法が書かれていますので、それをローカルのプロジェクト上で実行します。

git remote add origin [email protected]:dala00/vue-netlify-sample.git
git push -u origin master

問題なければGitHub上の画面を更新するとpushしたファイル一覧が表示されるようになります。

Netlifyにデプロイする

続いてNetlifyで先程作成したGitHubのリポジトリを連携させて、簡単にデプロイできるようにします。まずは「New site from Git」ボタンを実行します。するとGitHub上のリポジトリ一覧が表示されます。

ただ、新規登録時やNetlify上でのアプリケーション作成時のGitHub連携方法によってはもしかしたら表示されていないかもしれません。すべてのリポジトリの連携を許可する設定であれば表示されていると思いますが、特定のリポジトリだけ許可する設定で連携した場合は作成したばかりのGitHubリポジトリは表示されていません。その場合は画面の下に

Can’t see your repo here? Configure the Netlify app on GitHub.

というメッセージのリンクがありますので、そちらでGitHubに移動して許可するリポジトリを追加する必要があります。下記のような感じで追加します。

問題なく選択できたらアプリケーションの新規登録画面に遷移します。Build commandにyarn build、Publish directoryにdistと入力して登録を行います。

登録が完了するとデプロイ一覧に下記のようにデプロイ中である旨のステータスが表示されています。完了すると緑色のPublishedというステータスに変わるのでしばらく待ちましょう。

問題なければ上部にURLが表示され、アクセスできるようになります。下記が実際にデプロイしたURLです。

https://eager-neumann-0e6dfa.netlify.com/

eager-neumann-0e6dfaの部分はSite settingsのsite nameという項目で変更することもできます。独自ドメインを持っていればそれを利用することもできます。

アプリケーションを更新する

アプリケーションに機能を追加してそれをデプロイしたい場合は、追加分をコミットしてGitHubにpushすると自動的にNetlify側も更新してくれます。

例えば試しに下記のようなよくあるインクリメントのテスト機能を書いてみます。例えばTypeScriptの場合はApp.vueを下記のように変更します。(主にcountを使ったところを追記しています)

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <div>
      <button @click="increment">Increment</button>
    </div>
    <div>{{ count }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from './components/HelloWorld.vue'

@Component({
  components: {
    HelloWorld
  }
})
export default class App extends Vue {
  count = 0

  increment() {
    this.count++
  }
}
</script>

問題なければ下記のようにボタンを押すと数値が増えていく機能が出来上がります。

あとはコミットしてpushすると再度Netlify上でデプロイが走りアプリケーション上に反映されます。

まとめ

このようにJavaScriptとGitHub、Netlifyを使うだけだと非常に簡単にアプリケーションを作ることができます。サンプルや、ずっと運用していくわけではない簡単なアプリケーションであればおすすめです。

今回作成したプロジェクトはGitHubで公開しています。

https://github.com/dala00/vue-netlify-sample

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント