秒速でリリースするWebアプリ.pdf

Transcript

1. 秒速でリリースする Webアプリ個人開発 Easily release web apps
2. Hello! I am Hirofumi Horiuchi. (Hori) Job: System Engineer Hobby: Camp, Watting Football 　 @h_reader 2
3. 今日話すこと Today’s Contents ▪ Vue CLI で簡単にテンプレート作成 Create Vue.js app very easy using Vue CLI. ▪ GitHubにPush Push to GitHub. ▪ Netlifyでお手軽リリース Easy release using Netlify.
4. 1. Vue CLI Vue CLIを使って テンプレートを作る
5. “ Vue CLI を使ってVueのプロジェクトを作っ たことがある人はいますか？ Have you ever use Vue CLI?
6. npm install -g @vue/cli # Check Installed vue -V Vue CLIのインストール Installation
7. 7 Vue CLIで プロジェクト作成 Create Vue.js project vue create hello-world Enter を押すと Vue Projectが作られます。 Press Enter to create the project.
8. 8 オプション内容 Option contents `Manually select features` を選ぶと オプションを選択できます。 If you can select `Manually select features` , you can select options.
9. Create時のオプション 1 Create options Babel Babelを使うか選択。 Select to use Babel. TypeScript TypeScriptを使うか選択。 Select to use TypeScript. Progressive Web App(PWA) Support PWA対応のサポートをするか選択。 Select to use PWA support.
10. Create時のオプション 2 Create options Router Vue Routerを使うか選択。 Select to use Vue Router. Vuex Vuexを使うか選択。 Select to use Vuex. CSS Pre-processors Sass/SCSS, Less, Stylus のいずれかを選択して利用できる。 Select to use Sass/SCSS or Less or Stylus.
11. Create時のオプション 3 Create options Linter / Formatter ESLint(TSLint)を利用するか選択。ルールの大枠も選択可。 Select to use ESLint(TSLint), and selectable rules. Unit Testing Unit Testを利用するか選択。’Mocha + Chai’ or ‘Jest’のいずれか Select to use Unit Test. Selectable ‘Mocha + Chai’ or ‘Jest’l E2E Testing E2E Testを利用するか選択。’Cypress’ or ‘Nightwatch’のいずれか Select to use E2E Test. Selectable ‘Cypress’ or ‘Nightwatch’
12. “ あとは作りたいアプリを 作るだけ！ Just create the apps you want!
13. 2. GitHubへPush アプリをGitHubのリポジトリへ Push
14. 14 GitHubで リポジトリ作成 Create repository E.g. : hello-world
15. git remote add origin https://github.com/user_name/hello-world.git git push -u origin HEAD リポジトリへPush Push to GitHub repository
16. “ アプリの準備は整いました。 The app is ready.
17. 3. netlify netlify でアプリをリリース
18. “ 　　　　　　　　　とは？
19. netlify とは？ What is netlify? ホスティングWebサービス 静的サイトをホスティングすることができるWebサービスです。 GitHubと連携して自動でデプロイも可能です。 netlify is a web service that can host static sites. It can be deployed automatically in conjunction with GitHub.
20. 20 アカウント登録 Sign up ‘GitHub’、’GitLab’、 ’Bitbucket’、’Eメール’で アカウント登録可能です。 ‘GitHub’, ‘GitLab’, ‘Bitbucket’ or ‘E-mail’ You can register an account.
21. 21 デプロイ設定 Setting deploy. select
22. 22 デプロイ設定 Setting deploy. select
23. 23 デプロイ設定 Setting deploy. select
24. 24 デプロイ設定 Setting deploy. select
25. 25 デプロイ設定 Setting deploy. select
26. 26 デプロイ設定 Setting deploy. Input build command. “npm run build” Input publish directory “dist” select
27. 27 デプロイ設定 Setting deploy.
28. 28 デプロイ設定 Setting deploy. App Url
29. 29 デプロイしたアプリ Deployed App
30. netlify の良いところ Good points about netlify デプロイの設定がUIポチポチだけで簡単にできる。 Deployment settings can be made easily with just the UI. GitHubのmasterブランチにPushしたら自動でデプロイ。 Deploy automatically when you push to the master branch of GitHub.
31. まとめ summary 31
32. “ プロジェクト作成、デプロイが 簡単じゃないですか？ Isn't it easy to create and deploy a project?
33. “ これで ‘フロントエンド’ の開発に 集中できますね！ Now you can concentrate on developing the ‘front end’!
34. “ あれ？ ’バックエンド’ は？ って思いますか？ Did you think “How do you do backend development?”
35. “ netlify は静的サイトを ホスティングするWebサービスです。 netlify is a web service that hosts static sites.
36. “ なのでバックエンドは デプロイできません。 So the backend cannot be deployed.
37. “ そこで。。。 so...
38. “ バックエンドを使わず、 Firebaseに任せましょう！ Use Firebase without a backend!
39. “ バックエンドを使わず、 Firebaseに任せましょう！ Use Firebase without a backend!
40. 次回 予告 Next announcement
41. Vue.js + Firebaseの 開発 How to develop Vue.js and Firebase. There might be a change of plan. VSCode is amazing!
42. 42 Thanks! Any questions? You can find me at ▪ @h_reader