Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Nuxt.jsとNetlifyで作って公開する【NDS56】

179 views

Published on

私のおすすめする◯◯というタイトルでの発表でした。
リポジトリ:https://github.com/sakapun/nds56-nuxt

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Nuxt.jsとNetlifyで作って公開する【NDS56】

  1. 1. Nuxt.jsとNetlifyで 作って公開する @sakapun ウォーターセル株式会社
  2. 2. Vueを加速するフレームワーク Nuxt.js
  3. 3. なぜNuxt.jsが良いのか • 最新のフロントエンドで自分のほしいと思う環 境をすぐに整えてくれる • Webpack • Babel • Eslint
  4. 4. なぜNuxt.jsが良いのか • ルーティングを書かなくて良い • ディレクトリ構成の指針が決まっており、迷わ なくて済む • Vuexの使い方が普通にやるより楽になってる • PWAが簡単にできる
  5. 5. Nuxt.jsの注意点 • 一から何かを作るというプロジェクトには良いが、 途中からぶち込むものではない • Nodeは8系以上からの対応になる • SSRをやろうとすると結構つらい • Universal Javascriptを心がけなければいけないた め、普段のブラウザのJSで書けるコードが書け ない • 速度が早すぎる。 • 1月ぐらいにv1が出たが、もうすぐv2が出そう
  6. 6. 導入について
  7. 7. Vue cli 2つある問題 ○ npm install --save vue-cli △ npm install --save @vue/cli (次期バージョン) なかなか次期バージョンが正式リリースされない。 出回ってる記事もたいてい上のバージョンなので、 地雷を踏む事が少ない上のほうが今はまだ安定。
  8. 8. 導入 $ vue init nuxt-community/starter-template <project-name> $ npm install
  9. 9. ディレクトリ構成について 今回作ったもののリポジトリ https://github.com/sakapun/nds56-nuxt
  10. 10. Netlifyにデプロイ
  11. 11. Netlify • Github pagesはディレクトリが一段下がる • S3はアップロードまでの手順がめんどい • Githubにpushしたらビルドしてくれるから楽 • SSL化してくれる • などなど!
  12. 12. PWA対応がめちゃ楽
  13. 13. Web Push通知としてはOne Signal との連携モジュールが簡単 (単に導入するだけなら)
  14. 14. その他、Nuxt絡みで最近よく聞く事例 • ContentfulをヘッドレスCMSとして使う • WordPressをAPIだけ使ってフロントを Nuxt+Netlifyにする • Graphqlをバックエンドにして使う
  15. 15. Nuxtなら高速で開発できるよ!
  16. 16. ということで ウォーターセル社では Reactエンジニアを募集しています! 求むフロント、サーバ、 インフラ、モバイルエンジニア

×