昨日ポートフォリオを作成しました。
現在転職中なので作ったのもありますが、もともとSPAを作りたかったので作りました。
作成したポートフォリオはこちら。
使用した技術は以下の通りです。
- Vue.js
- vue-router
- vue-lazyload
- AWS
- route53
- CloudFront
- S3
- Lambda
- CloudFormation
- Github
- CircleCI
- Google Analytics
- Google Tag Manager
アプリケーションはVue.jsを使用しました。ReactのJSXってあんまり好きじゃないんですよね。その点、Vue.jsはvueファイルでページごとにHTML,CSS,JSを分けて書けるのがわかりやすくて好きです。ルーティングではvue-routerを使用してます。あと、画像の読み込みが遅いところがあったのでvue-lazyloadを導入しました。やってみて、最新のフロントエンドの開発方法の流れが結構理解できました。
インフラはroute53でドメイン等設定してCloudFrontと繋げてます。CloudFrontのメインリソースとしてS3を指定していて、リソースがS3にアップロードされたらCloudFrontのキャッシュを更新するLambdaを設定してます。そしてroute53を除くインフラをCloudFormationで構築しています。
デプロイですが、GithubとCircleCIを使用してます。前職でデプロイを手動で行なっていて苦労したので、勉強もかねて使用してみましたが、最高ですね。使いこなせるようになりたいです。
アクセス分析はGoogle AnalyticsとGoogle Tag Managerを利用して分析してます。とりあえず、メニューをクリックしたらクリック計測するように設定してます。計測できるアクセスURLがルートだけになってしまうのですが、SPA独自の設定方法があるんですかね。次の課題ですね。
0件のコメント