Microcms + nuxt.jsで個人ブログサイトをデプロイした件についてお話です。
Microcms + nuxt.jsで個人ブログサイトをデプロイした件うえむー2020 / 5 / 17
View Slide
アジェンダ１.自己紹介２.開発経緯・手順３.microcms・nuxt.jsとは４.ブログサイトの紹介・苦労したこと５.今後の活動・まとめ
1.自己紹介NameうえむーSkillhtml / 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/
2.開発経緯・手順
2.開発経緯・手順開発経緯去年の8月にmicro cmsのサービス開始したというブログをみて、micro cmsに興味を持った。個人で作業するのは限界を感じていたので、人脈を作りたい。エンジニアの仲間と交流したい。それじゃあ、個人のブログサイトを作ろう
2.開発経緯・手順全体構成nu-blognuxt.jsmicro cmsレンタルサーバー・ドメイン お名前.comフロント CMSAPI叩く
2.開発経緯・手順1.作業手順2.設計・要件定義3.nuxt.jsをインストール4.設定・デザイン ・製造(静的コーディング)5.micro cmsアカウント登録6.コンテンツ登録・API出力7.製造(組み込み)8.お名前.com登録9.ドメイン・レンタルサーバー購入 ・SSL化10.検証環境デプロイ・動作検証・修正11.本番環境デプロイ・Nu-blog公開
3.microcms・nuxt.jsとは
3.microcms・nuxt.jsとはmicro cmsとはmicroCMSとは2019年8月にローンチした、日本製のAPI型のヘッドレスCMS。コンテンツ管理のためのwordpress・Movavle Typeのようにサーバ管理は一切不要で、アカウント登録するだけですぐにサービスを利用開始できます。https://microcms.io/ 新規登録ページに遷移して登録するだけ
3.microcms・nuxt.jsとはヘッドレスの「ヘッド」は、ビュー（表示する画面）のことです。ヘッドレスなので、ビューの無いCMSということになります。ヘッドレスCMSのサービスは色々あります。Contentfulhttps://www.contentful.com/Graph CMShttps://graphcms.com/
3.microcms・nuxt.jsとはなぜ、ヘッドレスCMSのサービスは何種類かあるのに、micro cmsにしたのか・・・？理由は簡単、英語が苦手だからです！
3.microcms・nuxt.jsとは従来のCMS・ヘッドレスCMSの比較(従来のCMSの場合)wordpressなどの従来のCMSは、ヘッダー・コンテンツ・フッターまでCMS管理しています。レンタルサーバーを借りて・CMS(wordpress等)をインストール・サイト構築し、デプロイしたあと、バックエンドの管理画面で各コンテンツを更新していきます。データーベースwordpress フロントサーバー
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 => {……….コーディングサーバー
3.microcms・nuxt.jsとは登録・手順に関しては、個人のブログサイトで詳しくお話します！http://nu-blogsite.net/
3.microcms・nuxt.jsとはnuxt.jsとはNuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計されたフレームワークです。一部分から徐々に採用することが可能で、静的なランディングページから複雑な企業向け web アプリケーションの作成に使用できるそうです。https://ja.nuxtjs.org/guide/
3.microcms・nuxt.jsとはよくわからないので、Nuxt.jsで主な機能を展開します！
3.microcms・nuxt.jsとは主な機能・Vue ファイルで記述できること（*.vue）・コードを自動的に分割すること・サーバーサイドレンダリング・非同期データをハンドリングするパワフルなルーティング・静的ファイルの配信・JS と CSS のミニファイ化・ 要素（、 など）の管理・開発モードにおけるホットリローディング・プリプロセッサ: Sass, Less, Stylus な・モジュール構造で拡張できること etc....
3.microcms・nuxt.jsとは実装してすごいなと体感したところ・Vue ファイルで記述できること（*.vue）・コードを自動的に分割すること・サーバーサイドレンダリング・非同期データをハンドリングするパワフルなルーティング・静的ファイルの配信・JS と CSS のミニファイ化・ 要素（、 など）の管理・開発モードにおけるホットリローディング・プリプロセッサ: Sass, Less, Stylus な・モジュール構造で拡張できること etc....
3.microcms・nuxt.jsとはサーバーサイドレンダリング(SSR) ・ JS と CSS のバンドル及びミニファイ化●サーバーサイドレンダリング(SSR)Javascriptでサーバー内部実行(コンパイル)して、HTMLを生成すること●ミニファイ化ホームページのファイルのサイズを小さくすること
3.microcms・nuxt.jsとはサーバーサイドレンダリング(SSR)ミニファイ化のどこがいいの？
3.microcms・nuxt.jsとはサーバーサイドレンダリング(SSR)JS と CSS のバンドル及びミニファイ化のメリット・パフォーマンス性向上「表示速度向上」・SEO対策・開発効率の向上実装してコンパイルしてデプロイしたき、サイトを開いた時ミニファイ化した影響で表示速度がすごく早い！
3.microcms・nuxt.jsとは・ 要素（、 など）の管理Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしています。nuxt.config.js を使ってこの設定を上書きすることができます。
4.ブログサイトの紹介・苦労したこと
4.ブログサイトの紹介・苦労したことブログサイト名・ロゴについてサイト名：nu-blog自分名前のイニシャルからとりました！ロゴのメッセージ：ナレッジを蓄積して、どんどんブログを書いて自分のサイトに公開して情報をシェアしたいというメッセージが込められております！
4.ブログサイトの紹介・苦労したことトップページトップページの仕様メインバナー最大3枚設置全カテゴリのブログを表示しております。
4.ブログサイトの紹介・苦労したこと記事一覧・詳細ページ記事一覧ページの仕様プログラミング・ビジネス・テクノロジー・ライフ・インフォメーションの５カテゴリのブログ記事を公開しています。
4.ブログサイトの紹介・苦労したことお問い合わせページお問い合わせページの仕様お問い合わせページにフォームを投稿し送信すると、micro cms側で投稿確認ができるようになります。
4.ブログサイトの紹介・苦労したこと一番苦労したのは「お問い合わせページ」で試行錯誤して10日かかりました。
4.ブログサイトの紹介・苦労したこと苦労した理由・お問い合わせはaxiosのajaxを実装して入力したデータをPOST送信する処理をしており、ajaxはいつもjQueryでの実装が慣れていたため、axiosでの実装は慣れてなかったので時間がかかった。・click・submitイベントの処理が全然異なっていたため、チュートリアルを見ながら実装していた。・スクリプトで実装していたため、動作検証はクロム検証ツール + console.logで随時確認していて動作検証するのに時間がかかった。
4.ブログサイトの紹介・苦労したことそして色々と試行錯誤して、５月５日にデプロイしました！
5.今後の活動・まとめ
５.今後の活動・まとめ今後の予定・周に1回～2回ブログを更新、LPを作成して展開したい。・アンケート機能を追加する・next.js + micro cmsで実装して比較検証してみたい・netlifyでデプロイしたい。まとめ・micro cmsは自由にフロント構築ができて、部分的にCMS化できるので改修の費用がかからずエンジニアからしたらありがたい。・nuxt.jsは最初は難しいという印象だったけど、慣れると作業が楽になる。・諦めずに構築して自分に自信がついた。
Thank You !!
uemura
takefumiyoshii
goutarouh
sanfrecce_osaka
codehex
azukiazusa1
codemountains
zakky21
texmeijin
ryounasso
assu_ming
fbei_ot
piyoppi
orderedlist
skipperchong
jeffersonlam
brad_frost
tammielis
sferik
hatefulcrawdad
jcasabona
pauljervisheath
mza
panda_program
nonsquared