エンジニアなのでLaravel, AWS, Vueあたりでポートフォリオ作った。（1/2）
こんばんは。icchyです。
この記事では、僕がこの間1週間ぐらいでパパっと作った自分のサイトをどう作ったかの概要と、詰まったところを書いて行こうかなと思います。
この記事だけを見ても1から作ることはできませんが、参考にしたサイトを載せていますので、ぜひ開発のきっかけにしてもらえればと思います。
また、同じような技術で作ろうとしている方でわからないことがあれば、コメントしていただければ答えられる範囲でお答えします。
プルリクも受け付けています( ^ω^ )
gitのリポジトリはこちらです。
少し長くなりますので、本題だけ読みたい方は適宜飛ばしてお読みください。
2部構成で、当記事はどういう機能を作ったかという、アプリケーション寄りの話を書いてます。
次の記事では主にミドルウェア周辺で詰まったところ（nginx, AWSの設定）を書こうと思っています。
目次
- 作成した背景
- 使った技術
- 未着手項目
- Laradockでローカル環境を構築
- Vue Routerで画面遷移のストレスを減らす
- 基本的なPOST処理
エンジニアなのでLaravel, AWS, Vueあたりでポートフォリオ作った。（1/2）←当記事
エンジニアなのでLaravel, AWS, Vueあたりでポートフォリオ作った。（2/2）
作成した背景
- 転職をする時に、ある程度の技術力の証明がその場でできるようにしたい。
- 今までの経歴を整理したい。（これを見ながら履歴書書きたい）
使った技術（バージョン）
- Laravel（5.7.3）
- PHP（7.2.8）
- Vue.js（2.9.6）
- Docker for mac（18.03.0-ce-mac60）
- AWS（EC2）
- mysql（Ver 14.14 Distrib 5.7.23）
- nginx（1.12.1）
未着手項目
- https化
- スマホのコーディング対応（css, HTMLはフリー素材を使ってます）
- cron設定
Laradockでローカル環境を構築
Laradockというdocker上でLaravelを動かしたい場合に、とても簡単に構築を済ませられるパッケージになります。
以前はVagrantを使って開発をしていたのですが、今年に入ってからDockerに移行することになり、手始めに体験するためにこのLaradockはとても便利でした。
英語が読める方は公式で十分ですが、私のように困難な方はQiitaと比較しながら読み進めるといいと思います。
ベトナム人と仕事をしていたので、簡単なやりとり程度なら英語でできるのですが、文章チックになるとまだちょっと抵抗があって、脳みそも使うので日本語見に行ってしまいます..。
さて、Laradockで開発環境を構築できたらあとは ローカルでがしがし開発をしましょう。
Vue Routerで画面遷移のストレスを減らす
Vue Routerという公式のライブラリを使うと、通常はnavigation等のタブ移動はアクセスを伴う画面遷移になってしまうところを、jsによる再描画で済ませることが可能になります。
言葉ではちょっと分かりづらいと思うので、実際に私のサイトで触ってみるとわかると思います。
About, Work, Private, Contactというタブ移動がアクセスを伴わなくても可能になっています。
※スマホ対応はまだ出来ていません><
仕事で似たような部分があったのですが、諸々事情があって実装出来ず、早く試したいと思っていたライブラリでした。
サイトを作るにあたって、何かビジュアル要素が欲しかったのですが、
デザインの素養があるわけでもなかったので、少しこだわって投稿しているInstagramの写真たちをAPIで収集して表示してやろう、と思いつきました。
開発者アカウントを取得して、必要な情報を入力した後にアクセストークンが取得できるので、それを頼りにAPIを叩いてDBに保存。
あとは1時間に1回バッチとして叩き、最新の投稿に更新できるようにしたら、cronに登録して完了。
バッチの作成もLaravelの公式コマンドで1発作成できます。最高。
- Laravelでコマンドラインアプリケーションを作成する
ちょっとまだ本番環境で自動で叩かれるように設定できていないのですが、そんなに難しくないはずです。
基本的なPOST処理
新卒研修とかでやりがち（僕はやってない）ですが、お問い合わせフォームを作りました。
laravelの標準でPOST処理が簡単に書けるのですが、POST後に再描画が走ってしまうのがイケてないので、
vueで入力を受け取り
→axiosを使ってPHPにPOST
→Laravel標準のvalidationを通して
→返ってきたsuccess or error で描画を分ける。
というやり方をしています。
こちらも言葉で書くと分かりづらいので、axiosについてチョチョっと調べたのちにgitのソースコードを見てもらえると理解しやすいと思います。
ファイル的には Contact.vue です。
（理想はソースコード見ろって言わなくても分かりやすい説明できるといいんですけどね..w）
以上でアプリケーション周りの紹介終わりです。
次の記事に続きます〜
