目的
Web開発をしたことがないエンジニア向けに、Web開発がとっつきやすくなる + 継続できるためのメモです。Time to First Hello Worldという言葉があるくらい、開発を始めるとっつきやすさは大事です。それと同じくらい大事なことが、開発意欲の持続です。私の持論は、とりあえずWebサイトの「がわ」を公開してしまうことで、開発意欲の持続させられる。
お見苦しいですが、私の個人開発しているサイトが、以下になります。
https://www.aj-code.com
なぜ無料でできるのか
Azure Web Static Appを使うことで、月間100GBの通信容量まで無料で利用できる。月間10万PVを目標にしても、1アクセス1MBまで利用できるので、十分でしょう。
ちなみに、100GBを動画再生に変換すると、約160時間相当なので、余裕な気がする。
おそらく、AWSなども無料枠があるが、今必要ないので、調べていない。
必要経費
Mustではないとはいえ、やっておかないとサイトとしてダサすぎるものが、以下になります。カスタムドメインの取得費用
人気なドメインでない限り、お名前.comで無料で取得できるが、管理費として年間1000円程度は支払う必要がある。モチベーションは、「フロントエンドの開発がしたい」
私は、Webの開発経験がないエンジニアで、まずはReactを使ってみたかった。なので、React x Azureで開発をしました。開発手順は、最低限のReactアプリを作成して、まずはデプロイ。デプロイが出来たら、少しずつ開発を進める方法を取りました。後は、git pushをするたびに、変更がインターネットに公開されるので、積み上げをしていくだけです。楽しいですよ。React周り
O'ReillyのReactコースAzure周り
AzureでWeb Static Appを作成する次にやること
後は、自分のペースでReactを勉強しながら、サイトを作っていくだけですが、Webサイトを作る上で、以下のようなことをやらなければなりません。1. ロゴ、Faviconの作成
嫌じゃなければ、Adobe Photoshopなどで作る。外注も面倒なので、作った方が早いと思う。2. Font、画像素材を決める
自分の好きなフォントを決める。私は、Adobe Fontから選びました。素材は、Adobe Stockを使いました。他にも無料のサイトがあるので、好きな素材を集めておきましょう。ちなみに、あなたがAdobeのものを使っていただいても、私には1円も入らないので、ご安心を。
-
Adobe Font
https://fonts.adobe.com/ -
Adobe Stock
https://stock.adobe.com/jp
3. カスタムドメインの購入
Azure Web Static AppのデフォルトのURLはあまりにもダサいです。こんな感じですので、やっぱりカスタムドメインを買いましょう。無料で買えるので、なんか得した気分になれますよ。運用費を払うときは、損をした気分にもなりますが。4. DNSの設定
カスタムドメインを購入した場合、DNSの設定をなければなりません。お名前.comでもできるみたいですが、Azure DNS zoneを使うと、これも無料。期限なしです。 ここを見ながらやると、できます。Qiita -【Azure×お名前.com】カスタムドメインを追加する
5. サイトデザイン
面倒じゃなければ、Adobe XDなどを使って、まずはサイトの見た目を決めておくと、開発時にスムーズに実装ができる。私は面倒だったので、ノートにデザインを書いて、そのまま実装を始めました。分かってはいるけど、XDを習得する時間があるなら、Reactを書いたり、勉強したい気持ちが強くて、XDをやる気になれません。6. Google Analytics
公開だけするより、アクセス解析をして、サイトを積み上げで良くしていきましょう。私もこれからやりますので、今は知見がありません。7. 流入経路を考える
検索流入なのか、ブログ流入なのか、SNS流入なのか、複合的なのが良いに決まっているが、個人開発のサイト作った後に、やりたくなると思います。とは言っても、まずは作って公開しましょう。この辺を偉そうに考えだすより、開発したい意欲がある間に、サイトを作って公開することが第一優先だと思います。8. マネタイズを考える
ここも同じです。ごちゃごちゃ考えずに、まずはサイトを作って公開する。そこまでいけば、開発モチベーションは保たれるし、マネタイズなんてそのうち考えればいい。一番やってはいけないのは、ローカルサイトだけ作って、開発意欲を満たしてしまうこと。何なら、ローカルサイトなんてものは、作り切る前に、みんな辞めてしまう。今あなたがWebサイトを公開したら、あなたは日本の9割のエンジニアより実績のあるエンジニアになれますから。まずは、公開しよう。その他のリソース
-
Twitter
https://twitter.com/GooglePython