SlideShare a Scribd company logo
1 of 18
Webアプリを公開するまで
山田創介
自己紹介
経歴
勤怠管理システムのSaasの開発経験後、2019年8月フリーランスとして起業。2022年1月に株式会社 coroutineの取
締役に就任。フリーランスと役員を兼業
業務ではバックエンドを軸とし、Laravel(PHP) や DRF(Python)などの経験を主にする。
また、React.jsをはじめとしたフロントエンド開発やGitHub Actionsを利用したCI/CDの整備なども行っている。
現在は 女性下着を販売する会社でDXを行うプロジェクトにPGとして参画中
山田創介(@yamasaw44)
フリーランス / 株式会社 coroutine 取締役
スキル
DRF(Python)/Laravel/Nuxt.js
React.js/Cypress.js/Storybook/Tailwind CSS
Go lang/ AWS
その他
eSportsの大会を運営したりしています。趣味はゲームや登山です
はじめに
バックエンドやフロントエンドなどの
Webアプリケーション開発については
言語やライブラリのドキュメントが公
式も含めて豊富に用意もされており、
無料で経験的に手がつけられるので勉
強する手段は恵まれていると思います。
はじめに
しかし、実際に制作したアプリケーショ
ンを公開するまでの知識については、ど
のようなドキュメントを触ればいいのか
わからずWebサイトや動画などで見知っ
た知識で止まっている方が多い方と思い
ます。
レンタルサーバ
ー?共用サーバ
ー?VPS?
ドメイン?DNS?
AWS?EC2?S3?
RDS?GCP?
Webアプリケーションを公開するまで
Webアプリケーションは以下の手順で公開されます
- 公開するサーバーの選定
- ドメインの取得
- DNSの設定
- アプリケーションサーバーの構築
- コードのデプロイ
Webアプリケーションを公開するまで
Webアプリケーションは以下の手順で公開されます
- 公開するサーバーの選定
- ドメインの取得
- DNSの設定
- アプリケーションサーバーの構築
- コードのデプロイ
今回はアプリケーション開発についてはお話ししません
公開サーバーの選定:サーバーの種類
レンタルサーバー ・・・業者が貸し出しているサーバーを利用する。
例)さくらサーバー, Xserver, ロリポップ
パブリッククラウド ・・・レンタルサーバーと同様に業者のサーバーを利用する。
仮想技術を用いたサーバーを使う。
例)Amazon Web Service, Google Cloud Platform, Microsoft Azure, Netlify
オンプレミス ・・・ 自前でサーバーを用意して運用を行うこと。
公開サーバーの選定:サーバーの種類
レンタルサーバー
サーバーの業者と契約を行いサーバーのレンタルを行う。
費用面では月額のコスト以外にも初期費用などが必要とな
ってくるため費用は高め。
運用サーバーの監視など、サーバーのレンタル以外でのサ
ービスもパッケージとして組み込めます。
レンタルの種別としては共用サーバー、専属サーバー、
VPS(仮想サーバー)が存在し、それぞれに一丁一短があり
ます。
公開サーバーの選定:サーバーの種類
パブリッククラウド
VPSと同様、仮想を用いたサーバーをレンタルします。
VPSと大きな違いは、OSなどのリソースの選択肢が多い事
と技術的に高度な機能(ロードバランサーやデプロイの自動
化等)を同時に利用する事ができます。
費用面については初期費用は発生しませんが従量課金に
よるサービスが多いため、どれくらい支払いが発生するか
はあらかじめ予測を立てて運用しなければ思わぬ出費がか
かる事があります。
サーバーの運用管理については自前で行わなければなら
ないので運用時の計画もきちんと立てる必要があります。
公開サーバーの選定:個人で勉強する上では
個人的にWebサーバーの構築を勉強するのでしたら、AWS
が提供しているVPSのLightsailを利用する事をおすすめします。
VPSとしては、サーバー内で行える設定が多岐に渡りOSなど
も幅広く選ぶ事ができます。
またAWSのEC2などとは違い、料金携帯が月極で明瞭なの
で費用面でのトラブルも起こらず、最低構成であれば基本料
金がおよそ$3.5/monで使用する事ができるので安く済みます。
次点として基本無料で利用できるNetlifyなどがありますが
Netlifyはフロントエンドのデプロイに限定しているため利用
想定が限定的になります。
ドメインの取得
公開サーバーを構築するとWeb上にアプリケーションは公開できますが、公開
はIPアドレスを使った公開になります。ただIPアドレスではURLとして覚える事
が難しいため、ドメインというWeb上での代替名を利用してWebアプリケーショ
ンは一般的に公開することになります。
例えばgoogle.comのIPアドレスは 142.250.196.131であるため
http://142.250.196.131 に接続する事でもgoogle.comにアクセスすることは可能
です
ドメインの取得: ドメインはどう管理されているか
ドメインの管理は各国もしくは各区分にレジストリ組織という物が存在して
おり、その組織が登録管理を行っています。管理するドメインは大別すると以
下になります。
ccTLD ・・・国を括りとしたドメイン(.comを除く)
gTLD ・・・ 国に属さない団体を括りとしたドメイン(.comは例外)
日本国ドメインの.jp及び.co.jpのレジストリ組織はJPRSという会社になります。
その他の組織として.comを管理するVerisign, Incや.netを管理するPublic Interest
Registryなどがあります。
ドメインの取得: ドメインはどう管理されているか
また、世界的な統一組織としてICANNという国
際的な非営利組織が存在し世界中のドメインが一
意になるように管理したり、レジストリ組織内の
ドメイン管理の運用管理におけるポリシーの制定
などを行っています。
ドメインの取得:方法
それではドメイン登録しようと行きたいところですが、ドメイン登録はレジス
トリ組織に対して直接お問い合わせすることはできません。ドメイン登録を行う
指定業者を通して行う必要があります。お名前.comやムームドメインといった専
門のベンダーからレンタルサーバーやパブリッククラウドのサービスの一つ(AWS
のRoute53等)などを利用して取得する事ができます。
ドメインの取得: 取得の際の注意点
登録したドメインの情報は一般公開される
登録を行ったドメインの情報はWHOISによって公開されます。登録した個人情報
の中で住所・氏名・電話番号などが公開されます
https://whois.jprs.jp/
迷惑だと思う方もいるかもしれませんが、用途としては自分が管理していないドメインの管
理者と連絡をとる手段として利用されています。例えば自社のサービスの名前をとったドメ
インが悪意をもった利用をされた際に連絡を行う事ができます。
DNSの設定
Domain Name System略称です。ドメインを特定のIPアドレスと紐づけドメイン
にアクセスした際にIPアドレスを保有しているサーバーに接続を行う事をできる
ようにします。設定はWebに公開するアプリケーションサーバーとドメインを紐
づける他にもgmail等のメールサーバーとドメインを紐づける際にも利用を行いま
す。
DNSの設定はドメイン取得したサービス内で行います。
DNSの設定
DNSの細かい設定については説明が長くなってしまうので後日お話しできればと
思います。
ご清聴ありがとうございました!
@yamasaw44

More Related Content

Similar to Webアプリを公開するまで

[db tech showcase Tokyo 2016] B15: サイバーエージェント アドテクスタジオの次世代データ分析基盤紹介 by 株式会社サイ...
[db tech showcase Tokyo 2016] B15: サイバーエージェント アドテクスタジオの次世代データ分析基盤紹介 by 株式会社サイ...[db tech showcase Tokyo 2016] B15: サイバーエージェント アドテクスタジオの次世代データ分析基盤紹介 by 株式会社サイ...
[db tech showcase Tokyo 2016] B15: サイバーエージェント アドテクスタジオの次世代データ分析基盤紹介 by 株式会社サイ...
Insight Technology, Inc.
 

Similar to Webアプリを公開するまで (20)

シェアフル 開発組織.20220210 _1_.pptx (1)
シェアフル 開発組織.20220210 _1_.pptx (1)シェアフル 開発組織.20220210 _1_.pptx (1)
シェアフル 開発組織.20220210 _1_.pptx (1)
 
2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」
2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」
2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」
 
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
 
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモhtml5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
 
事業会社で働くエンジニアのマインドセット - DevLOVE関西
事業会社で働くエンジニアのマインドセット - DevLOVE関西事業会社で働くエンジニアのマインドセット - DevLOVE関西
事業会社で働くエンジニアのマインドセット - DevLOVE関西
 
子供達と プログラミングをはじめよう
子供達と プログラミングをはじめよう子供達と プログラミングをはじめよう
子供達と プログラミングをはじめよう
 
Things to consider early before RPA expansion_ver1.2.pdf
Things to consider early before RPA expansion_ver1.2.pdfThings to consider early before RPA expansion_ver1.2.pdf
Things to consider early before RPA expansion_ver1.2.pdf
 
Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説
 
フロントエンドエンジニアが知るべきFirebaseの世界
フロントエンドエンジニアが知るべきFirebaseの世界フロントエンドエンジニアが知るべきFirebaseの世界
フロントエンドエンジニアが知るべきFirebaseの世界
 
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
 
何を自動化するのか
何を自動化するのか何を自動化するのか
何を自動化するのか
 
[db tech showcase Tokyo 2016] B15: サイバーエージェント アドテクスタジオの次世代データ分析基盤紹介 by 株式会社サイ...
[db tech showcase Tokyo 2016] B15: サイバーエージェント アドテクスタジオの次世代データ分析基盤紹介 by 株式会社サイ...[db tech showcase Tokyo 2016] B15: サイバーエージェント アドテクスタジオの次世代データ分析基盤紹介 by 株式会社サイ...
[db tech showcase Tokyo 2016] B15: サイバーエージェント アドテクスタジオの次世代データ分析基盤紹介 by 株式会社サイ...
 
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りBootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
 
YYPHP #13 初めてのコードレビュー
YYPHP #13 初めてのコードレビューYYPHP #13 初めてのコードレビュー
YYPHP #13 初めてのコードレビュー
 
マネージャーになってからの技術を磨く戦略と戦術
マネージャーになってからの技術を磨く戦略と戦術マネージャーになってからの技術を磨く戦略と戦術
マネージャーになってからの技術を磨く戦略と戦術
 
Flex入門
Flex入門Flex入門
Flex入門
 
クラウド x IoT実践事例のご紹介
クラウド x IoT実践事例のご紹介クラウド x IoT実践事例のご紹介
クラウド x IoT実践事例のご紹介
 
WordPressの進化とWordPress名古屋コミュニティの進化
WordPressの進化とWordPress名古屋コミュニティの進化WordPressの進化とWordPress名古屋コミュニティの進化
WordPressの進化とWordPress名古屋コミュニティの進化
 
``完璧に理解した``WEB の裏側の仕組み.pptx
``完璧に理解した``WEB の裏側の仕組み.pptx``完璧に理解した``WEB の裏側の仕組み.pptx
``完璧に理解した``WEB の裏側の仕組み.pptx
 
Rubykaigi2010
Rubykaigi2010Rubykaigi2010
Rubykaigi2010
 

Webアプリを公開するまで