Zenn
🫠

【#7】サーバーにアップロードしてシリーズ完結！静的ホスティングでWebアプリを公開しよう

に公開
JavaScript
Netlify
webアプリケーション
サイト公開
自主開発
idea

📝 今回の記事でやること

  • 作成したタイマーアプリを無料で使えるサーバーにアップロードする
  • Github Pagesを例に、アップロードの具体的な手順を解説
  • シリーズまとめ

🌐 サーバー候補の比較

サービス名 URL 特徴
GitHub Pages https://pages.github.com/ GitHubと親和性が高く、無料で始めやすい
Netlify https://www.netlify.com/ 自動デプロイやカスタムドメインも簡単に設定できる
Vercel https://vercel.com/ Next.jsなどの静的/動的アプリも対応、シンプルなUI
Firebase Hosting https://firebase.google.com/products/hosting/ 高速CDN・SSL自動で安心、安全な配信が可能

✅ 選んだサーバーとその理由

今回選んだのは Netlify です

理由:

  • GitHubにリポジトリを作り、連携することで公開できる手軽さ
  • 追加のアカウント登録や複雑な設定が不要
  • 本当はGithub Pagesにしようと思ったが、なぜかできなかったので自分が一番使い方を分かっているNetlifyにしました

🚀 Netlifyでのアップロード手順

① リポジトリ作成

  • GitHubで新しいリポジトリを作成（今回は IntervalTimerAppとします。）

② ファイルアップロード

  • リポジトリページの「Uploading an existing file」をクリック

  • 「Drag ~~~~」と書いている箇所に全ファイルをドラッグ or 「choose your files」をクリックし、該当するファイルを全て選択

  • リポジトリページのCodeタブに選択したファイルが表示されていたらOK!

③ Netlifyにログインしてページを公開！

  1. Netlifyにログイン

  2. 画像中央の「Import from Git」をクリック

  3. 「GitHub」をクリックし、次画面の一番下にある「Deploy ～～～」をクリック

  4. 数分待つと、以下のURLでアプリが公開される

🔎 実際にアップロードしてみよう

実際に上記の手順を実行し、アプリをアップロードしてみましょう。
動作確認ができたら、これにて一連のシリーズは完結です！

✏️ シリーズまとめ

今回は初めての自主開発でした！
考えの足りないことがありましたし、構想はあったけど結局いらないやん！となって実装しないものもありました。

ただ、一通り開発をすることで頭の中だけだったふんわりしたものが実際に形になることを経験することができました。

大まかな考えは妄想から持ってくることができましたが、実際に実装する上で表現したい細かな箇所を具体的に考えることが少し大変でしたね。

これからもこれに満足することなく新しいアプリを作っていく予定ですし、作成したアプリをアップデートすることもしたいです。

次に作成する過程は今回のことを踏まえて、より効率的に最適化して頑張りたいと思います！

最後に、今回のWebアプリ作成でやったこと、今後のアップデート案を列挙しましたので、ご覧ください！

✒ 今回のWebアプリ作成でやったこと

  • 作業タイマーアプリをゼロから設計
  • HTML/CSS/JavaScriptで動作するローカルアプリを開発
  • モジュール化や可読性向上のための構成改善
  • 最終的に無料で公開できるまでを完了！

💭 今後のアップデート案

  • 音やインジケーターの追加（ユーザーの利便性向上）
  • localStorageによる設定保存
  • 必要に応じてサーバーサイドの機能追加（ユーザーごとに設定保存など）

…と、さらに発展させる道もあります。
上記に記述している案については更新して追加していこうと思っています。その際も、記事にするのでまた読んでいただけると嬉しいです！

ここまで読んでいただきありがとうございました🙌✨

次回シリーズも考えていますので、またお願いします！

Discussion