Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Microcms + nuxt.jsで個人ブログサイトをデプロイした件

Cf642b7a99e07f86e6e7ec7a3bb94d87?s=47 Nobuyoshi
May 17, 2020
Programming
0
490

Microcms + nuxt.jsで個人ブログサイトをデプロイした件

Microcms + nuxt.jsで個人ブログサイトをデプロイした件についてお話です。

Cf642b7a99e07f86e6e7ec7a3bb94d87?s=128

Nobuyoshi

May 17, 2020
Tweet

More Decks by Nobuyoshi

See All by Nobuyoshi
Cf642b7a99e07f86e6e7ec7a3bb94d87?s=48 uemura
1
330
Cf642b7a99e07f86e6e7ec7a3bb94d87?s=48 uemura
0
40
Cf642b7a99e07f86e6e7ec7a3bb94d87?s=48 uemura
0
5
Cf642b7a99e07f86e6e7ec7a3bb94d87?s=48 uemura
0
140
Cf642b7a99e07f86e6e7ec7a3bb94d87?s=48 uemura
0
31
Cf642b7a99e07f86e6e7ec7a3bb94d87?s=48 uemura
0
200
Cf642b7a99e07f86e6e7ec7a3bb94d87?s=48 uemura
1
120
Cf642b7a99e07f86e6e7ec7a3bb94d87?s=48 uemura
0
160

Other Decks in Programming

See All in Programming
4651f57d479e562a45dd624cc24dbee3?s=48 nsaito9628
0
970
6afbe110d33ef7e859fb8649b86bae55?s=48 mashabow
0
720
404a34d5e0d3d7b38237a8cbecf4c18a?s=48 seiseikai123
0
1.3k
4bcb32bcb73d1ead993a6ad55b189e9e?s=48 rluisr
1
130
61fe6537eed31e8d1999ce1c1d5bf988?s=48 himaratsu
0
220
E8fae2ce31d2d3700bca68c464862bad?s=48 paru871
0
120
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
180
E10ba38646a905c8cd2c893c84d5c520?s=48 suzushin54
0
280
404a34d5e0d3d7b38237a8cbecf4c18a?s=48 seiseikai123
0
250
F9d1e7c494103e9ad73723d4496334f9?s=48 mattdclarke
0
200
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
13
15k
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
420

Featured

See All Featured
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
20k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
156
12k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
336
17k
79acae287842acf29084005533a7fb3b?s=48 hursman
112
9.6k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
60
9.7k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
17
1.3k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1352
200k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
195
9.1k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
350
20k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
25k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3k

Transcript

  1. Microcms + nuxt.jsで個人ブログサイトをデプロイした件 うえむー 2020 / 5 / 17

  2. アジェンダ １.自己紹介 ２.開発経緯・手順 ３.microcms・nuxt.jsとは ４.ブログサイトの紹介・苦労したこと ５.今後の活動・まとめ

  3. 1.自己紹介 Name うえむー Skill html / css / scss /

    javascript / jQuery / vue.js / gulp.js / php etc... ※趣味でgo・nuxt.js・micro cms・firebaseを勉強中です。 今後は next.js・x-ninjaも勉強したいと思います。 Hobby プログラミング学習・ビートボックス・ゴルフ・ボードゲーム・麻雀 SNS・ブログサイト Twitter:：https://twitter.com/uemuragame5683 ブログサイト：https://nu-blogsite.net/

  4. 2.開発経緯・手順

  5. 2.開発経緯・手順 開発経緯 去年の8月にmicro cmsのサービス開始したというブログをみて、micro cmsに興味を 持った。 個人で作業するのは限界を感じていたので、人脈を作りたい。エンジニアの仲間と交流 したい。 それじゃあ、個人のブログサイトを作ろう

  6. 2.開発経緯・手順 全体構成 nu-blog nuxt.js micro cms レンタルサーバー・ドメイン　お名前.com フロント CMS API叩く

  7. 2.開発経緯・手順 1.作業手順 2.設計・要件定義 3.nuxt.jsをインストール 4.設定・デザイン 　　　　　・製造(静的コーディング) 5.micro cmsアカウント登録 6.コンテンツ登録・API出力 7.製造(組み込み)

    8.お名前.com登録 9.ドメイン・レンタルサーバー購入 　　　　　　　　　　　　　・SSL化 10.検証環境デプロイ・動作検証・修正 11.本番環境デプロイ・Nu-blog公開

  8. 3.microcms・nuxt.jsとは

  9. 3.microcms・nuxt.jsとは micro cmsとは microCMSとは2019年8月にローンチした、日本製のAPI型のヘッドレスCMS。 コンテンツ管理のためのwordpress・Movavle Typeのようにサーバ管理は一切不要で、 アカウント登録するだけですぐにサービスを利用開始できます。 https://microcms.io/ 新規登録ページ に遷移して登録す

    るだけ

  10. 3.microcms・nuxt.jsとは ヘッドレスの「ヘッド」は、ビュー（表示する画面）のことです。 ヘッドレスなので、ビューの無いCMSということになります。 ヘッドレスCMSのサービスは色々あります。 Contentful https://www.contentful.com/ Graph CMS https://graphcms.com/

  11. 3.microcms・nuxt.jsとは なぜ、ヘッドレスCMSのサービスは何種類かあるのに、 micro cmsにしたのか・・・？ 理由は簡単、英語が苦手だからです！

  12. 3.microcms・nuxt.jsとは 従来のCMS・ヘッドレスCMSの比較 (従来のCMSの場合) wordpressなどの従来のCMSは、 ヘッダー・コンテンツ・フッターまでCMS管 理しています。 レンタルサーバーを借りて ・CMS(wordpress等)をインストール・サイ ト構築し、デプロイしたあと、バックエンドの 管理画面で各コンテンツを更新していきま

    す。 データーベース wordpress フロント サーバー

  13. 3.microcms・nuxt.jsとは 従来のCMS・ヘッドレスCMSの比較 (ヘッドレスCMSの場合) microcmsなどのヘッドレスCMSは、 任意の箇所のみCMS化できます。 コンテンツ登録して出力したAPIを、 javascript・php・swiftなどでその APIを適用してコーディングします。 スライダー・インフォーメーションなどのその 一部分を管理画面から操作できます。

    サーバー データーベース サーバー micro cms フロント fetch("https://xxxxxx.microcms.io/api/v1/xxxx", { headers: { "X-API-KEY": xxxxxxxxxx } }) .then(res => res.json()) .then(json => { ………. コーディング サーバー

  14. 3.microcms・nuxt.jsとは 登録・手順に関しては、個人のブログサイトで詳しくお話します！ http://nu-blogsite.net/

  15. 3.microcms・nuxt.jsとは nuxt.jsとは Nuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計 されたフレームワークです。 一部分から徐々に採用することが可能で、静的なランディングページから複雑な企業向 け web アプリケーションの作成に使用できるそうです。

    https://ja.nuxtjs.org/guide/

  16. 3.microcms・nuxt.jsとは よくわからないので、 Nuxt.jsで主な機能を展開します！

  17. 3.microcms・nuxt.jsとは 主な機能 ・Vue ファイルで記述できること（*.vue） ・コードを自動的に分割すること ・サーバーサイドレンダリング ・非同期データをハンドリングするパワフルなルーティング ・静的ファイルの配信 ・JS と

    CSS のミニファイ化 ・<head> 要素（<title>、<meta> など）の管理 ・開発モードにおけるホットリローディング ・プリプロセッサ: Sass, Less, Stylus な ・モジュール構造で拡張できること etc....

  18. 3.microcms・nuxt.jsとは 実装してすごいなと体感したところ ・Vue ファイルで記述できること（*.vue） ・コードを自動的に分割すること ・サーバーサイドレンダリング ・非同期データをハンドリングするパワフルなルーティング ・静的ファイルの配信 ・JS と

    CSS のミニファイ化 ・<head> 要素（<title>、<meta> など）の管理 ・開発モードにおけるホットリローディング ・プリプロセッサ: Sass, Less, Stylus な ・モジュール構造で拡張できること etc....

  19. 3.microcms・nuxt.jsとは サーバーサイドレンダリング(SSR) ・ JS と CSS のバンドル及びミニファイ化 •サーバーサイドレンダリング(SSR) Javascriptでサーバー内部実行 (コンパイル)して、HTMLを生成すること

    •ミニファイ化 ホームページのファイルのサイズ を小さくすること

  20. 3.microcms・nuxt.jsとは サーバーサイドレンダリング(SSR) ミニファイ化のどこがいいの？

  21. 3.microcms・nuxt.jsとは サーバーサイドレンダリング(SSR) JS と CSS のバンドル及びミニファイ化のメリット ・パフォーマンス性向上「表示速度向上」 ・SEO対策 ・開発効率の向上 実装してコンパイルしてデプロイしたき、サイトを開いた時ミニファイ化した影響で表示速

    度がすごく早い！

  22. 3.microcms・nuxt.jsとは ・<head> 要素（<title>、<meta> など）の管理 Nuxt.js ではデフォルトの設定でほとんどの ユースケースをカバーしています。 nuxt.config.js を使ってこの設定を上書きす ることができます。

  23. 4.ブログサイトの紹介・苦労したこと

  24. 4.ブログサイトの紹介・苦労したこと ブログサイト名・ロゴについて サイト名：nu-blog 自分名前のイニシャルからとりました！ ロゴのメッセージ： ナレッジを蓄積して、どんどんブログを書いて 自分のサイトに公開して情報をシェアしたいと いうメッセージが込められております！

  25. 4.ブログサイトの紹介・苦労したこと トップページ トップページの仕様 メインバナー最大3枚設置 全カテゴリのブログを表示しておりま す。

  26. 4.ブログサイトの紹介・苦労したこと 記事一覧・詳細ページ 記事一覧ページの仕様 プログラミング・ビジネス・テクノロ ジー・ライフ・インフォメーションの５カ テゴリのブログ記事を公開していま す。

  27. 4.ブログサイトの紹介・苦労したこと お問い合わせページ お問い合わせページの仕様 お問い合わせページにフォームを投 稿し送信すると、 micro cms側で投稿確認ができるよう になります。

  28. 4.ブログサイトの紹介・苦労したこと 一番苦労したのは「お問い合わせページ」で試行錯誤して10日かかりました。

  29. 4.ブログサイトの紹介・苦労したこと 苦労した理由 ・お問い合わせはaxiosのajaxを実装して入力したデータをPOST送信する処理をしてお り、ajaxはいつもjQueryでの実装が慣れていたため、axiosでの実装は慣れてなかった ので時間がかかった。 ・click・submitイベントの処理が全然異なっていたため、チュートリアルを見ながら実装し ていた。 ・スクリプトで実装していたため、動作検証はクロム検証ツール + console.logで随時確

    認していて動作検証するのに時間がかかった。

  30. 4.ブログサイトの紹介・苦労したこと そして色々と試行錯誤して、５月５日にデプロイしました！

  31. 5.今後の活動・まとめ

  32. ５.今後の活動・まとめ 今後の予定 ・周に1回～2回ブログを更新、LPを作成して展開したい。 ・アンケート機能を追加する ・next.js + micro cmsで実装して比較検証してみたい ・netlifyでデプロイしたい。 まとめ

    ・micro cmsは自由にフロント構築ができて、部分的にCMS化できるので改修の費用が かからずエンジニアからしたらありがたい。 ・nuxt.jsは最初は難しいという印象だったけど、慣れると作業が楽になる。 ・諦めずに構築して自分に自信がついた。

  33. Thank You !!