普段AWSやGCPをいじっているのですが、今回はフロンドエンド業界で有名な、Vue.jsを触ってみたので、そのインストールまでのまとめです。
最終的にはAPI Gateway + Lambda + DynamoDB + S3のようなクラウドネイティブな形にしていければ面白いかなと思いますが、まずはS3にSPA的な形で動くものを置いてみるところから始めます。
Vue.jsとは？
javascriptのフレームワークの一種です。jQueryの進化版くらいの認識
詳しくは公式サイトを見てください。
最近のフレームワークはPythonのDjangoに関してもそうですが、とても充実していますね。使う側からしたらありがたい話です。
Vue.jsの特徴として双方向バインディングというのがあります。画面への描画と内部でリンクしているオブジェクトが常時リンクしている形を取っているため、従来だと複雑なことを記載しないといけない部分を比較的簡単に実装することが可能です。
またフレームワーク自体シンプルな構成をしており、かつ学習コストが低いため、私のような普段プログラミングしないインフラエンジニアでも簡単に使うことができます。
vue-cliのインストール
私の記事投稿時点の環境はMacなので、Homebrewを使いインストールに必要なnodebrewをインストールしています。
また別環境でAWSのCloud9を使ってインストールすることもできました。その際は事前にセキュリティグループで手動で8080ポートを開けておく必要があることに注意しましょう。
バージョンの確認。あまりに古い場合はアップグレードしておきましょう。
$ node -v
v12.11.0
$ npm -v
6.11.3
vue-cliのインストール
$ npm install -g @vue/cli
$ vue -V
3.11.0
プロジェクト作成
プロジェクトを作成します。作業用ディレクトリに移動し、コマンドを実行します。今回はtest-pjとします。
途中作成するモードを選びますが、defaultでOKです。
$ mkdir vue-pj #Vueプロジェクト用にディレクトリを作成
$ cd vue-pj
$ vue create test-pj
Vue CLI v3.11.0
? Please pick a preset: default (babel, eslint)
Vue CLI v3.11.0
✨ Creating project in /Users/xxxxx/vue-pj/test-pj.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
サーバの実行
プロジェクトを作成すると、プロジェクトの名前のディレクトリが作成されるので、移動しサーバを起動する。
$ cd test-pj
$ npm run serve
ブラウザで http://localhost:8080/ か http://127.0.0.1:8080/ でアクセスしてください。
実行環境によりますが、実行端末のプライベートIPやグローバルIPでもアクセス可能な場合があります。
私はなぜかlocalhostでアクセスできなかったので、ループバックアドレスでアクセスしました。
上記画面が出てくれば完了。
今回はここまで。