はじめに
最近、QiitaやITの記事などでクリエイターの方がポートフォリオを作成したという記事をよく目にします。
実際に作成したポートフォリオを拝見させてもらうと、自分の経歴やスキル、成果物を素晴らしいデザインでサイトに載せ、世にしっかりと自分自身をアピールしているなーと感じました。
そこで、自分もポートフォリオを作ってみようと思い立ち、さっそく着手しましたが、肝心なことを忘れていました。
フロントエンドなんてやったことないよ・・・・
私の仕事を振り返ると、SEとして約10年間、ずっとサーバサイドの仕事しかしてきませんでした。
DBの構築・チューニングやサーバサイドのプログラミング、Webアプリケーションのデプロイや運用管理などがプロジェクトにおける主な役割です。
フロントエンドは外部に委託することがほとんどの為、デザインは全くできません。
一応、JQueryは長い間使っていたため、一通りの実装はできますが、cssはピンポイントでしか触ったことが無く、凝ったポートフォリオなんて夢のまた夢です。
しかし、ポートフォリオとは自分のスキルを表現するモノのはずなのに、デザイン経験が無い自分が果たしてデザインを重視すべきかという疑問を抱きました。
結局「そもそもデザインなんてやったことないから、凝ったポートフォリオなんて必要ない！それよりも、サーバサイドの技術をアピールできるようなポートフォリオを作成すべし！」という結論に至り、デザインを投げて作成することにしました。
できたもの
現在は都合上閉鎖しています
サーバサイドの技術なら、まずログイン機能は必要だろうと思い、ログイン式のポートフォリオにしています。
下記のID・パスワードでログインできます。
ID：user
PW：user
構想案
まず、ポートフォリオに載せたい機能を考えて列挙してみました。
- フロントエンドで人気の「Vue.js」を使用したい
- 流行ってるSPA(Single Page Application)にしたい
- レスポンシブデザインにしたい
- サーバサイドは慣れているSpring Bootを使いたい
- セキュリティは強固にしたい
- RESTful APIにしたい
- DockerでWebアプリケーションをデプロイしたい
- リバースプロキシ使いたい
- 見栄えは最低限でよい
ポートフォリオに上記の機能を持たせられれば、自分のスキルの証明にもなるはずと思い、このような構想になりました。
実際に使ったもの
- Vue.js
- Webpack
- Spring Boot
- Spring Security
- Gradle
- MySql
- Docker
- Nginx
細かく上げるときりがありませんが、大枠は上記です。
バージョン等は今後、詳細記事を載せる際に記載する予定です。
デザインについて
冒頭で述べたように、自分はデザインができませんので、無料のテンプレートを採用しました。
テンプレートはこちらで探しました。
creative-tim
実装できた機能
フロントエンド
- SPA (Single Page Application)
- https化 (SSL対応)
- レスポンシブデザイン
- かっこよさげなテンプレートの利用 → デザインスキルが皆無でも何とかなりました
バックエンド
- DBを参照するログイン機能
- CORS (Cross-Origin Resource Sharing) 対策
- CSRF (cross-site request forgeries) 対策
- 実行できるAPI・表示メニューをユーザ権限によって制御
- RESTful API
インフラ
- Dockerを利用したWebアプリケーションのデプロイ
- GCPでのリリース
- リバースプロキシの設定
普通のwebサービスとしてもリリースできるような運用環境となりました。
※ GCPのスペックを上げればの話ですが・・・
リリースまでの手順
- Vue.jsでフロントエンドを作成し、Webpackでビルド。
- バックエンドにフロントエンドのモジュールを取り込み、gradleでビルド。
- 出来上がったjarファイルをDockerfileを使ってビルド。（ビルド自体はdocker-hubに任せました）
- GCEの作成時、コンテナイメージにdocker-hubを参照するよう設定し、リリース
- Nginxをリバースプロキシに使い、ポートの転送設定
※ ドメインはお名前ドットコムで取得し、サーバ証明書はLet's Encryptで取得しました。
とりあえずここまで
使用した技術は今後Qiitaの記事として一つ一つをピックアップして投稿する予定です。
git-hubについては要望があれば載せます。