ポートフォリオサイトをリニューアルしました。
https://shiramiz.com
主要技術は、HTML / CSS / Vue.js(Vue CLI,Vue Router) / AWS（S3,CloudFront,Lambda）です。
以下、制作の流れやつまづいた点など公開していきますが、ベストプラクティスではないという確固たる自信があるので、Vue熟練者は直ちにブラウザを閉じてください。

動機

・以前制作したポートフォリオサイトに飽きた
・Vue.jsとAWSを使ってサイトを作ってみたかった

全体像

Topページ、自己紹介ページ、実績ページ、問い合わせページのシンプルなサイトです。サイト自体はVue CLIで作成し、AmazonS3にホスティングしています。

なぜS3に突っ込んでいるのか

恥ずかしながら、Amazon S3ってずっとただのストレージサービスだと思っていて、静的サイトホスティングの機能があることを最近知りました。これまでwebサイトのホスティングはNetowlさんのスターサーバーを借りていたのですが、勉強がてらS3ホスティングを試してみることにしました。

S3を触ってみて何より驚いたのが、その安さ。AWS系のサービスは超高級なイメージがあったのですが、今月の請求は0.56$(日本円で約60円)になる見込み。やっす！！このうちほとんどがRoute53の利用料。もちろん従量課金なのでたくさんリクエストが来たら変わると思いますが、100万クエリごとに0.4$とかそんな世界です。

ただし注意事項として、本当に静的サイトに特化しているので、問い合わせフォームを作るときにちょっと工夫が必要になります。今回もフォームを作りたいがために複数のAWSサービスを触る羽目になりました。

環境構築

Vue CLIのインストール

Vue.js を vue-cli を使ってシンプルにはじめてみる – Qiita

この辺の記事にお世話になりました。また、この記事には記載がないですが、npm installを実行するためには、node.jsをインストールする必要があります。

便利なパッケージ管理ツール！npmとは【初心者向け】 | TechAcademyマガジン

Vue CLIインストール時に、Vue Routerも一緒にインストールしておきます。今回はそんなに大規模じゃなかったので、Vuexは入れていません。

わけもわからぬままコマンドを打って疲れたかもしれませんが、以降黒い画面で使うのは以下のみです。

・npm run dev（npm run serve）
「localhost:8080」で作成中のサイトを確認するためにローカルサーバを起動
・Ctrl+C
ローカルサーバを終了する(「マジで終了しますよ？」みたいな質問が表示されるので「Y(YES))」を入力しEnter)
・npm run build
ビルドと呼ばれるものです。要するにサーバにアップすれば動く形式に書き出してくれます。実行すると「dist」ディレクトリにそれが生成されるので、まるっとサーバにアップすればOK。

というわけで、まずはここまで行きましょう。

実装

それでは実装です。テキストエディタはVisualStudioCodeを使用しました。VueファイルはHTML/CSS/JSごちゃまぜのミックスグリルみたいなファイルなので、拡張機能のVeturは必ずインストールしておきましょう。また、本記事ではGitには触れませんので適宜バージョン管理は行ってください。

このファイルだけ編集すればOK

Vue CLIをインストールすると、プロジェクトフォルダにものすごい数のファイルが突っ込まれます。

だいたいここで（無理…キモい…）となって意気消沈するのですが、一旦寝たりゲームしたりして、心を強く持ってからもう一度見てみるのがいいでしょう。それでも心が折れた場合は諦めてラーメンでも食べに行ってください。北九州市にある「明千」がおすすめです。濃厚な豚骨スープがVueのことなど全て忘れさせてくれます。

話が逸れましたが、このえげつない数のファイル、実は我々初心者を蹴落とすためのフェイクで、今回のような小規模サイトであれば実際に使用するのはごく一部なのです。恐ろしいですね。

今回使用したファイル／ディレクトリ

/index.html
最初に呼ばれるファイルです。

なんのこっちゃですね。とりあえず”en”を”ja”に変えておきましょう。

/src/main.js
Vueインスタンスを立ち上げたりしています。

これもなんのこっちゃですね。とりあえずシカトで

/src/views/
デフォルトでHome.vueとAbout.vueが入っているので、はは～ん、ページはここに突っ込むんだなぁと分かります。don’t think,feelです

/src/App.vue
こいつが親玉です。

localhostに表示されているテストページのナビゲーション部分が<router-link…>に相当します。そしての記述が、コンテンツ部分です。Vue Routerがパスに応じてコンポーネントを出し分けてくれているようなイメージです。

/src/components/
コンポーネントを拡張子「.vue」で置いていきます。デフォルトでHelloWorld.vueが入っています。localhostに表示されているテストページのコンテンツ部分はこいつです。

/src/assets/
画像などはここに置いていきます。

/src/router/index.js
Vue Routerの設定ファイル。「このURLの時にこのコンポーネントを表示する」みたいなことを定義しています。ヤバいですね。なんでこんな面倒なことしなきゃいけないんだという気持ちになります。

なんとなく全体を見ていくと、/src/components/配下にコンポーネントがあって、URLによってコンポーネントを出し分けることでページ遷移を実現していて、その設定は/src/router/index.jsに記載されているんだなぁとかなんとなく全体の動きが分かってきます。

今回は、先にルーティング部分を作ってから各コンポーネントを作りこんでいくアプローチをしました。

作成するページ分のファイルを用意する

今回、制作したページは以下の4ページ。

・TOPページ
・Aboutページ
・Worksページ
・Contactページ

ルーティングを設定する前に、/src/views/配下に各ページのファイルを用意します。

/src/views/Home.vue
/src/views/About.vue
/src/views/Works.vue
/src/views/Contact.vue

ルーティングの確認なので、一旦ファイルの中身は適当にAbout.vueのコピペで。

Vue Routerにページを登録

続いて、Vue Routerのルーティング設定を変更します。

▼/src/router/index.js

デフォルトではHomeとAboutを設定してくれているっぽいので、ここにWorksとContactを足していきましょう。また、シンプルにするため、aboutもhomeと同じ書式にしちゃいます。

こんな感じになります。冒頭で先ほど作成したVueファイルをimportして、「routes:」の部分にパスと名称、対象のコンポーネントを定義しています。

遷移を確認する

ここらで一旦保存して、localhost:8080で表示確認をしましょう。ローカルサーバが立ち上がっていなければ、黒い画面でnpm run devを入力。禍々しい英語が出てきた後に、「Your application is running here: http://localhost:8080」と出ればローカルサーバの起動成功です。ブラウザのURLにlocalhost:8080と入力して確認してみましょう。

エラーが出た場合は、吐き出されたエラーメッセージから読み解いていくことになるのですが、やりがちなミスは「コンポーネントファイルを作っていない」「パスの記述ミス」など。

無事ページにアクセスできたら、「http://localhost:8080/works」や「http://localhost:8080/contact」とURLを変更してみて、アクセスできたらルーティングの設定は完了です。あとは作成したVueファイルを編集して、ページを作成していきます。

今回はここまで。