運用費用0円の個人開発方法

目的

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コース

最小限のReactアプリの作り方

Azure周り

AzureでWeb Static Appを作成する

AzureでReactアプリをデプロイする

次にやること

後は、自分のペースで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

• Note
  https://note.com/banatie