Overview
シンプルであることに越したことはない。
シンプルなら環境の移行や再構築も苦にならない。
シンプルなら必然的にミスする確率も低減する。
今回は環境構築メモの役割も含めて、Webサイト運営に使用しているアプリを公開しておきます。
Target reader
- シンプルかつ低コスト＆高い可用性を持つWebアプリを運用したい方。
- Webサイトを作る上で最低限何を勉強しないといけないか知りたい方。
Prerequisite
- OSはWindows
- Macは1社に依存することからリスクヘッジのためWindows
- ただし、LinuxコマンドがメジャーなのでWindowsで実行する場合にググらないといけないことがある。 （WindowsのLinux環境であるWSL2が一般的になれば格差は是正されるかもしれない）
- 言語はNode.js
- フロントエンドがJavaScript一択なので、バックエンドも同一言語ならパッケージも共有でき効率的。
- クラウドベンダーのFaaS（Functions）をみた場合、Node.jsは各社採用言語の中で1,2位に属している。
- クラウドはFirebase（Google Cloud Platform）
- 個人でサービス提供するには可用性が命。その上でJavaScriptのコンテンツを配置するだけでいいFirebase Hostingは最善の一手。
- PWA化することで、キャッシュ優先利用により更に可用性を高めることが可能。
- データ転送量による完全従量制のため、ミニマムスタートにもってこい。
- そのほかオフライン対応の完全従量制DBであるFirestore等がそろっている。
- アプリが複雑化した際はGCPが控えているのでAWSやAzureにも決して見劣りはしない。
- 個人でサービス提供するには可用性が命。その上でJavaScriptのコンテンツを配置するだけでいいFirebase Hostingは最善の一手。
Body
Windowsにインストールしているアプリ
Chrome
https://www.google.com/intl/ja_jp/chrome/
文句なしのブラウザシェアNo.1なので、Chromeで開発しないWebアプリはありえない。
Git
Gitはソース管理のために利用する。
GitというよりGitHubはGCPにデプロイするためのハブになっているので不可欠。
GitHubに障害がおこるとデプロイできなくなるためもはや仕事不可。
（Gitはローカルで更新できるのでソースの修正を記録し続けることは可能）
Node.js
フロントエンドもバックエンドもJavaScript言語で書けてしまうJavaScriptランタイム。
バックエンドは別言語でもいいが、あえて別の言語にする理由がないならJavaScript一つで十分。
Visual Studio Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Visual Studio Codeはソースコード書いたり、デバッグしたり、開発時に利用する。
WebアプリのIDEのスタンダードになりつつあるかな？
Windows開発向けに作られたVisual Studioが動作が重く、ダウンロードサイズも大きかったがこいつは軽量で人気が高い。
拡張機能も充実しており、IDEとの連携でVSCodeがないということは見たことない。
[optional]Google Cloud SDK
https://cloud.google.com/sdk/install?hl=ja
今のところgcloud functions deployコマンドで必要になるが、Cloud Buildを利用してデプロイしているだめインストールされてなくても問題ない。
ただし、各プロダクトのコマンドを使うことになるはずなので、必要になったら入れたほうがいい。
入れなくてもCloud Shellがあるため乗り越えられるかもしれないが。
[optional]Firefox
https://www.mozilla.org/ja/firefox/new/
ブラウザシェアはChromeが圧倒しているが、Firefoxも一定程度ユーザーがいる。
そのため、Firefoxでの動作確認もしておきたいところ。
[optional]Edge
https://support.microsoft.com/ja-jp/help/4501095/download-the-new-microsoft-edge-based-on-chromium
Edgeのシェアはかなりすくないが、Chromiumベースとなり標準でインストールされるようになったら今後無視できなくなるかも？
ChromiumベースでChromeと違いも少なくなると予想できることから、WindowsPCをある程度ターゲットにするなら動作確認したいところ。
[optional]Slack
https://slack.com/intl/ja-jp/downloads/windows
個人で開発しているとPC上でコミュニケーションは取る必要がないため、PCへのインストールは必須ではない。
ただし、通知はよく使うはずなので、スマホへのインストールは必須。
npmでグローバルにインストールしているパッケージ
他にtoとupdateというパッケージがインストールされていた。
手動でインストールした記憶はないが、何かのインストールでバンドルされるなら消さないほうが吉。
firebase-tools
https://firebase.google.com/docs/cli?hl=ja
firebase関連のコマンド実行の際に必要。
現状だとFirebase Hostingにデプロイする際に使用している。
npmで各プロジェクトにインストールしているパッケージ
React
https://ja.reactjs.org/docs/create-a-new-react-app.html
個人開発に重要なSPAで今構築するならVue.jsかReact。
私は仕事でReactを経験したので、それを引き継いでいるがVue.jsの採用を検討したいところ。
Material-UI
Reactだけでは生のHTMLで記述するため、見た目がかなり貧相になる。
そのため、見た目をよくするために必要なパッケージとして有力なのがMaterial-UI。
基本的なサンプルソースがそろっており、カスタマイズもしやすいので非常に使いやすい。
REACT ROUTER
https://reacttraining.com/react-router/web/guides/quick-start
WEBのページ遷移を管理するためライブラリ。
パスとそれに対応したコンポーネントを指定することで簡単にページ切り替えができる。
コードが多くなるとコード分割が必須になるが、導入しておくとパスごとに簡単に分割できるので便利。
VisualStudio Codeにインストールしている拡張パッケージ
Debugger for Chrome
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
VSCode上でChromeをデバッグするために必要な拡張機能。
個人的にはあまり使っていないが、入れておいた方がいいだろう。
Japanese Language Pack for Visual
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
VSCodeを日本語表記にしてくれる。
[optional]REST Client
https://marketplace.visualstudio.com/items?itemName=humao.rest-client
いろんなパラメータを含んだWebAPIをコールしたいときに便利。
個人的にはあまり使っていないが、入れておいた方がいいだろう。
[optional]DotEnv
https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv
Reactで環境変数を使う際に.envというファイルを使うが、VS上で強調表示してくれるもの。
なくても支障はない。
[optional]VSNotes
https://marketplace.visualstudio.com/items?itemName=patricklee.vsnotes
MarkDown形式でメモできる拡張機能。
課題やメモ等をとにかく書き込んで使っている。
最低限のものしかインストールしていないので、最終的にこのVSNotesが何でも屋としてフォローしてくれている。
Google Chromeにお気に入りとしているサイト
Search Console
https://search.google.com/search-console/about?hl=ja
自身のサイトがGoogle検索に正しく登録されているか、ユーザーがどんな検索ワードで入ってきているか等がわかる。
Webサイトを公開するなら100%通る道。
Google Analytics
https://marketingplatform.google.com/intl/ja/about/analytics/
サイトに入ってから出るまでのあらゆる情報が収集されている。
サイトを成長させるうえで分析は効果的ゆえ、これも必ず導入したいものの一つ。
Create React App
https://create-react-app.dev/docs/getting-started/
Reactを新規で作るなら、もはやCreate React Appは必須といっても過言ではない。
Create React Appを用いれば、深い知識を必要とせずに簡単に本番向けのサイトを構築できる。
Google Cloud Platform
https://console.cloud.google.com/home/dashboard
GCPのダッシュボード。クラウドを扱う以上必須。
Firebase
https://console.firebase.google.com/
Firebaseのダッシュボード。クラウドを扱う以上必須。
Google Adsense
https://www.google.com/adsense/
Webサイトの収益化の筆頭。モバイルがApp StoreかGoogle PlayならWebはAdsense。
審査に通れば簡単に収益化できる反面、厳しい処置を受けることもある。
身綺麗な運営と理不尽と感じてもそれを受け入れる忍耐が必要。
Conclusion
インストールが必要なアプリやライブラリが20個未満でサイトの運用が可能です。
これらを理解したなら、その少し先に私がいるということです。
学習コスト高いものもありますが、低コスト＆高い可用性実現のために頑張ってみてください。
便利なものはつい入れたくなりますが、依存関係を増やす以上のメリットがあるか考えてみるといいでしょう。
インストールしているものが一般的なものなら、クラウドベンダーが提供しているDockerイメージをそのまま利用できる場合もあります。
個人的には数年後、SurfaceGo持ち歩きながらVS Onlineで開発して、パワフルなノートPCを持たない人を目指しています
simple is best!
Have a great day!