Vue.jsで最小のアプリケーションを作成して、Netlifyにデプロイするまでを解説します。1週間以内くらいで1ページだけの簡単なWebアプリケーションを作ろう、と思ったらこれくらいで十分可能です。複雑なアプリケーションにしなければデータベースもブラウザ上のLocal Storageに保存する形であれば用意する必要もありませんし、とても楽です。
今回の最小のアプリケーションを作成するためには下記の準備が必要です。インストールやユーザー登録をしておきましょう。
npmのインストール
Yarn(好みで必要であれば)
GitHubのユーザー登録
Netlifyのユーザー登録
まずは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で下記を選択しました。
Babel, TypeScript, Linter/Formatter, Unit Testing, E2E Testing
TypeScriptと2つのTestingを追加しました。1ページの軽いアプリケーションなのでRouterは選択しませんでした。Testingは今回は使いませんが、もし使うことになった際に一から設定するのは面倒なのでとりあえず雛形を作ってもらっておいたほうが楽かなと思いいつも追加しています。とりあえずシンプルなアプリケーションを作るだけであれば不要でしょう。
Vueコンポーネントの使い方が変わります。好きな形を選択しましょう。Vue.js3でまた新しいカタチも出てくるのですがまだ選択できませんのでとりあえず好きなもので良いと思います。シンプルなアプリケーション用ですのであまり考える必要はないでしょう。
TypeScriptの場合? だけでしょうか。そのままYで良いと思います。
これもLinter/Formatterを選択している場合だけでしょうか。TSLintはもう使わないほうが良いのでそれ以外であれば好きなのを選べば良いと思います。僕はPrettierを選んでいます。
いつLintするかの設定です。とりあえずLint on saveで良いと思います。
Unitテストで利用するパッケージの選択です。GitHubでのスター数が多いので適当にいつもJestにしています。
同上でcypressを選択しました。
いろんな設定がpackage.jsonに詰め込まれるのは嫌なのでIn dedicated config filesにしました。
最後にこの設定を今後も使うかの選択です。怖いのでそのままNにしました。
これで完了です。待っていれば先程指定したアプリケーション名のフォルダにプロジェクトが作成されます。E2Eテストとかを入れているとかなり時間がかかるかもしれません。
問題なければ最後に表示されるように、cdコマンドでフォルダ内に移動し、serveコマンドを実行すればもうアプリケーションが実行できます。
cd vue-netlify-sample
yarn serve
問題なければURLが表示されるのでアクセスすれば表示されます。
とりあえずプロジェクトを作成した直後の状態をGitにコミットしておくと良いでしょう。通常はgit init
する必要がありますが、Vue CLIの場合はそれもやってくれているっぽいのでそのままコミットできます。git add
も必要ですがそれもやってくれているっぽいので、例えばVSCodeの場合はそのままメッセージを入力してコミットできるっぽいです。
さきほど作成したリポジトリとそのコミットを、GitHubのリモートリポジトリに登録します。まずは新しいリポジトリをGitHub上に作成します。
設定はこんな感じです。名前だけ入力するだけで大丈夫です。公開したくなければPrivateを選択しておきましょう。
新規作成できると、空のリポジトリが作成されます。この状態ではリポジトリの初期化方法が色々と書かれています。その中に既存のローカルリポジトリを使う方法が書かれていますので、それをローカルのプロジェクト上で実行します。
git remote add origin [email protected]:dala00/vue-netlify-sample.git
git push -u origin master
問題なければGitHub上の画面を更新するとpushしたファイル一覧が表示されるようになります。
続いて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で公開しています。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント