Webサービスを作っている人の開発環境

Webサービスを作っている人の開発環境って気になりませんか？わたしは気になります。

それなら自分が先に公開してみようということになりました。反応あればうれしいです。

どんなツールやソフトを使って開発しているのか、また開発のフローやサーバー環境などについてです。

広く浅くという全体のはなしです。

何をしている人なのか（技術的背景）

Webサービスを開発したり、Webサイトの制作を法人としてやっています。Webサービスはほぼ個人開発です。

もともとはWeb制作会社出身のWebデザイナー兼Webディレクター、インハウスのWeb部門で事業開発を行っていました。

わかりやすい自己紹介としてはWebディレクターが妥当なのかなと思っています。

なんですけど、Webサービスの開発をするようになってからサーバー周りを設定したり、プログラミングしたりで、システムに関わることが多くなってからは、ディレクターが適切なのかよくわかりません。

開発環境ってはじめてのころは悩みますから、これから個人開発をやってみたい人も、こんな感じならWebサービスの開発ができるんだなという参考になれれば幸いです。

こっちのがいいよとかありましたら、教えてください。

ローカルの開発環境

VMwareを利用して、Windowsに仮想環境を構築しています。

仮想環境ではよくあるLAMP構成で、CentOSを使っています。

CentOSのGNOMEはデスクトップですので、LiunxといってもMacのような感覚で使いやすいです。あ、Ubuntuも好きですよ。

こんな感じです
https://eng-entrance.com/linux-centos-install

なぜCentOSなのかは、公開する本番環境のサーバーでもCentOSを使うからです。

わたしは本格的な運用には、VPSサーバーを使いますので、サーバーの設定込みでいろいろテストしたかったりします（なぜVPSなのかは後述します）。

本番環境とローカル環境、できれば利用するアプリケーションのバージョンも同じにしておくと、思わぬ不具合もなく、動作確認もテストしやすいのでそうしています。

最近ではDockerも気になりますが、枯れた技術が好きなので様子をうかがっています。

わたしのように複数の技術に追いつかない人は、知見が溜まるのを待ったリ、デファクトスタンダードが決まったころに「ヨシヨシ」と動きはじめるのが、ムダ打ちしないTipsです（笑）。

デザイン制作

デザイン関連はAdobe製品で、基本的にはPhotoshop、Illustratorしか使っていません。Adobe XDは個人で使うことはあります。

Sketchとかありますけど、このあたりは本格的に利用したことはありません。制作会社では、一般的に利用されているのでしょうか。ぜひ教えてください。

エディター

コードを書くのはVisual Studio Code（VS Code）を使っています。エディターはLinux対応というのが前提になります。

デフォルトでGitも使えてプラグインも便利です。

Atomはあまりいい思い出がないですね。重いしクラッシュするわで……相性なんですかね。

AdobeのDreamweaverは制作会社のころ使っていましたが、無料でVS Codeが使えるいま、あえて有料で使うのは、わたしの知らないメリットがあるのかもしれないと勘ぐってしまいます。秘密がありそう。

フロントエンド

まずはHTMLやCSSです、Webデザイナーのスキルセットとしては、デザイン＆コーディングですね。

この領域はWebデザイナーに任せることが多くなってきましたので、既存のCSSやHTMLに手を付けることが圧倒的に多いです。

結果的にSCSSとかSASSに手をつける動機にならなくて、せめてCSSの擬似要素は便利だな、とかまでとなっておりますです。

JavaScriptは、非同期処理やUIを表現したり、UXを実現するために多くの場面で利用しています。

jQueryをいまだに使っていたりと、流れにちょっと（いいえかなり）遅れています。

JavaScriptは、今後ますます需要が増えると思っていて、ReactやVue.jsなど優先順位高めの課題となっています。

React NativeならiOS/Android両方のアプリも作れるなんて最高ですよね。

Webサービスを簡単にアプリ化するなら、Monacaを検討するって手もありますけど。

Webサービスをアプリ化していないのには理由があるんですが、これについてはQiitaで書いたんでよろしければぜひ。

Webサービスをアプリ化しない理由
https://qiita.com/QrioYagi/items/722d73da7bbc57593a32

サーバーサイド（プログラミング言語）

サーバーサイドの言語はPHPです。Perlも本当たまに。CPANが個人的に好きなんですが、Perl人気回復していて驚きました。

プログラミング言語の話題性について（TIOBE Programming Community index）
https://www.tiobe.com/tiobe-index/

プログラミング言語はなんでもいいと思っています。

言語によってWebサービスの質は変わりませんが、PHPやRubyのようにWeb開発に特化していれば開発効率いいですし、これからプログラミングをはじめるとしても覚えやすいと思います。

PHPは覚えればWordPressもカスタマイズできますし、ベターな選択だと思います。

フレームワーク

フレームワークはCakePHPとWordPressが中心です。

CakePHP4がどうなるかですが、Laravelいいなーとずっと思っています。

WordPressは記事更新が必要なケースでは必ず導入しています。利便性が高いですし使ったことがある人も多いので説明が楽です。

欠点はデータベースに汎用性をもたせているため、処理がある意味非効率ですので、速度や負荷などを気にするケースでは向いていません。

CakePHPとWordPressは共存できるので、用途で使い分けて運用することも多いです。

バージョン管理

バージョン管理にGit、リモートリポジトリにGitHubを利用しています。
ワークフローとしては、個人開発＋＠ということで、シンプルなGitHub Flowをベースにしています。

GitHub Flow 図解
https://qiita.com/tbpgr/items/4ff76ef35c4ff0ec8314

開発のタスク管理

開発の進捗やタスク管理には、GitHub Issuesを利用しています。

個人開発はなにかと頭のなかだけで完結しがちですが、アウトプットしておくと作業も整理されますし、履歴もできて一石二鳥です。

ローカルのブランチ名には、Issue番号を付けるようにしていますので、この点はGitHub Flowとは異なります。

GitHub Issuesの活用には、こちらの記事が参考になりました。https://dev.classmethod.jp/articles/github-issue-driven-dev/

バックアップ・共有環境など

デザインやエクセルとか、消えては困るデータはDropboxのクラウドに保存しています。

Dropboxは有料プランを使っていますが、Dropboxじゃなくてもいいと思います。容量と信頼性があればどこでもいいです。

Dropboxは特定のディレクトリを同期するようにして、ノートPCとも共有しています。最新データがデスクトップとノートで同期されていますので、外出先でも仕事ができます。

会社関連のメールはメーラーを利用するかと思いますが、Thunderbird Portable(サンダーバード ポータブル)なら、Dropboxで同期もできますので、外にいても送受信可能です。

あとは、外注さんとのやりとりで、構成案などはGoogle スプレッドシートで共有したり、ライターさんとはGoogle ドキュメント上で添削したりしています。

本番サーバーの構成など

あくまでわたしの定番なんですが、こんな感じの構成です。

サーバー：さくらVPS 2G～
OS：CentOS
Web server：Apache
データベース：MySQL
NoSQL：Redis（キャッシュ用）
言語：PHP
フレームワーク：CakePHP、WordPress
バージョン管理：Git/GitHub

（ApacheをNginxに変えようかな？は、たまに。CakePHPをLaravelにしようかな？というのは高い頻度で思います。）

これらの構成に、要件に応じて追加変更しています。

たとえば、リージョンを国外にしたいためAWSのLightsail（VPS）を使ったり、画像保存先にS3を利用したりとか。

PV数もそこそこあると想定しているサーバー構成ですので、もっとシンプルならレンタルサーバーでもいいと思います。

VPSはサーバー設定を自分でするため、覚えることも結構あります。当たり前になっているSSLも、別途契約してサーバーに設定しなければいけませんし、セキュリティへの対応も必要になります。

「Webサービスを作るなら公開させる」ことに意味がありますから、億劫だなと思えば、レンタルサーバーの上位プランでいいと思います。

これまでサーバーを20社近く使いましたが、さくらインターネット、またはエックスサーバーの2社がコスパもよく信頼できると感じています。

クラウドではなくなぜVPSなのか

VPSを選んでいる理由はコスト面の1点につきます。倍以上違うことも多いです。

VPSはネットワークの転送料金が無料ですから、とくにアクセスの多いサイトになるとコスト面で有利です。

一方でAWSなどのクラウドサーバーは、従量課金ですので利用に応じた料金となります。サイトの利用者が少なければ格安ですし、逆に増えればネットワーク転送料金もかさみます。

クラウド破産という言葉のとおり、想定外のトラフィックには、想定を越える請求がもれなく待っていることになります。

クラウドサーバーはスペックの柔軟性もコストも高い、VPSは柔軟性も低くコストも低いという認識で良いと思います。

想定を超えるトラフィックで、高額の請求を支払うか、サーバーを落としてしまうのか……許容できるほうを選びましょうということですね。

VPSはスケールアップができるので、さばけないトラフィックになれば上位プランに移行して対応することもできます。

ということで、最悪サイトがダウンしてもいいという前提なら、VPSはアリな選択だと考えています。

想定しているアクセス数と構成について

月間1000万PV、同時アクセス1000人ほどなら、以下の構成で問題ないという想定です。

サーバー：さくらVPS 8Gプラン/ 月額：7200円（税抜き）
CPU：仮想6Core
メモリ：8G
SSD：400GB

なにをもって大丈夫なのかは、サーバーのロードアベレージをみて判断することが多いです。

サーバーのロードアベレージはこちらが詳しいです。https://qiita.com/kunihirotanaka/items/21194f77713aa0663e3b

上記スペックならでロードアベレージ1や2程度なら問題ないですし、3あたりになれば少し気にしはじめています。

とくに機能追加のあとは、ロードアベレージを確認して負荷の状況をみつつ、調整を加えるようなこともやっています。

このスペックで運用している名付けポンというサイトでは、アクセスが多かった期間で月700万PVほどありましたが、気にするような負荷はとくに発生していません。

キャッシュも比較的ゆるいので、余裕はまだありそうです。

（名前ランキングを最近追加しまして、負荷高め……という自体に直面中ですが）

スペックの上限が決まっていると、限られたリソースを最大限使えるようなコードの書き方だったり、DBの設計やインデックスの貼りかた、キャッシュの使いどころなど各処理への意識が高くなり、技術面へのメリットもあるのかなと思います。

リリースまでのフロー

基本的には、GitHub Flowです。

流れとしては、
ローカルリポジトリのmasterからタスク毎にブランチをきる
↓
変更をコミット → GitHubにプッシュ
↓
プッシュしたブランチはGitHub（リモート）でmasterにマージ
↓
公開サーバーからプルする

GitHubのmasterブランチは常時デプロイ可能で、CIなどは利用せず手動にしています。

ほぼほぼ個人ですから、エラーはなく快適そのものですね。

個人開発でのGitの利用状況をあまり知らないのですが、個人でもGitを使うメリットは十分にあると思っています。

（Gitの利用は使える人からみれば当たり前なんだと思いますが、わたしは「隠れFTPの人（FTPは古いと認識しつつ使いたおしているが、公にFTPをメインに使っているとも言えないシャイな人、と定義します）」はまだ、一定数いるとみています。昨年のわたしがまさにそうでした。）

Gitならエラーがあっても各フェーズにすぐに戻れること、更新ファイルがあっちこっちに散らばっても、コマンド1つでアップロードできることなどが導入のメリットとして感じています。

FTPのころは、差分を選択して漏れがないかとか、アップロードする順番にも気を使っていました。

本番環境へのアップロードのミスのように、避けられる失敗を当たり前にしなくなりますので、注意する工程が減ったのは良かったです。

画像はGit管理していませんので、FTPでアップはしています。

ほかの人のも知りたい

開発環境につきましては、おおまかですがこのようになります。個別の細かいことについてはまた別の機会に。

ここをこうしたら？とか、ここがもっと知りたい、など質問ありましたら、コメントやツイッターでぜひ教えてください。

次回も技術系の話題で、実際に動かしているサイトの裏側について紹介したいと思います。

CakePHPとWordPressの共存方法だったり、サイトの全体構成（SEOも含めたサイトマップ的な）話題など。

記事を書くやる気がでますので、よろしければフォロー、シェアお願いします！

ツイッター
QrioYagi