PR

ウェブサイトのデプロイ方法：初心者向けガイド

プログラミング

ウェブサイトを開発した後、そのサイトをインターネット上に公開するプロセスを「デプロイ」と呼びます。本記事では、初心者向けにウェブサイトのデプロイ方法をステップバイステップで解説します。ここでは、無料で簡単に利用できるサービスやツールを中心に紹介します。

1. ウェブサイトの準備

まず、デプロイするためのウェブサイトのファイルを用意します。ウェブサイトが静的サイト（HTML、CSS、JavaScriptのみで構成されるサイト）の場合と動的サイト（サーバーサイド言語を使用するサイト）の場合があります。

静的サイトの例

以下は、簡単な静的サイトの例です。

index.html

htmlコードをコピーする<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My First Website</h1>
    <p>This is a simple static website.</p>
    <script src="scripts.js"></script>
</body>
</html>

styles.css

cssコードをコピーするbody {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

scripts.js

javascriptコードをコピーするconsole.log("Welcome to My First Website!");

2. GitHub Pagesを使ったデプロイ

GitHub Pagesは、GitHubリポジトリにホストされた静的ファイルをウェブサイトとして公開できる無料のサービスです。

ステップ1: GitHubにリポジトリを作成

  1. GitHubアカウントを作成し、ログインします。
  2. 新しいリポジトリを作成します。
    • リポジトリ名を入力（例: my-first-website）。
    • リポジトリを「Public」に設定。
    • 「Initialize this repository with a README」にチェックを入れます。
  3. 「Create repository」をクリックします。

ステップ2: ファイルをリポジトリにアップロード

  1. 作成したリポジトリページに移動し、「Add file」ボタンをクリックして「Upload files」を選択。
  2. ローカルのindex.html、styles.css、scripts.jsファイルをドラッグ＆ドロップでアップロード。
  3. 「Commit changes」をクリックして変更を確定。

ステップ3: GitHub Pagesを有効にする

  1. リポジトリの「Settings」タブに移動。
  2. 左側のメニューから「Pages」を選択。
  3. 「Source」セクションで「Branch」を選び、mainブランチのrootを選択。
  4. 「Save」をクリック。
  5. 数秒後に、GitHub PagesのURLが表示され、ウェブサイトが公開されます（例: https://yourusername.github.io/my-first-website/）。

3. Netlifyを使ったデプロイ

Netlifyは、静的サイトのデプロイに特化した無料のホスティングサービスです。

ステップ1: Netlifyアカウントを作成

  1. Netlifyのウェブサイトにアクセス。
  2. 「Sign up」をクリックし、GitHubアカウントまたはメールアドレスでアカウントを作成。

ステップ2: サイトをデプロイ

  1. Netlifyのダッシュボードで「New site from Git」をクリック。
  2. GitHubを選択し、NetlifyにGitHubアカウントへのアクセスを許可。
  3. デプロイしたいリポジトリ（例: my-first-website）を選択。
  4. ビルド設定を確認し（静的サイトの場合、特に変更不要）、デプロイをクリック。

Netlifyは自動的にサイトをデプロイし、公開URLを提供します。

4. Vercelを使ったデプロイ

Vercelは、静的サイトやNext.jsアプリケーションのデプロイに優れたホスティングサービスです。

ステップ1: Vercelアカウントを作成

  1. Vercelのウェブサイトにアクセス。
  2. 「Sign up」をクリックし、GitHubアカウントまたはメールアドレスでアカウントを作成。

ステップ2: サイトをデプロイ

  1. Vercelのダッシュボードで「New Project」をクリック。
  2. GitHubを選択し、VercelにGitHubアカウントへのアクセスを許可。
  3. デプロイしたいリポジトリ（例: my-first-website）を選択。
  4. ビルド設定を確認し、デプロイをクリック。

Vercelは自動的にサイトをデプロイし、公開URLを提供します。

5. FTPを使ったデプロイ

FTP（File Transfer Protocol）は、ファイルをサーバーにアップロードするためのプロトコルです。以下は、FTPを使ったデプロイ方法です。

ステップ1: FTPクライアントのインストール

FTPクライアントをインストールします。おすすめのFTPクライアントは以下の通りです。

  • FileZilla（無料で使いやすいFTPクライアント）

ステップ2: FTP情報の取得

ウェブホスティングサービス（例: Bluehost、HostGator、SiteGroundなど）にサインアップし、FTP情報を取得します。通常、以下の情報が提供されます。

  • FTPサーバー（例: ftp.example.com）
  • FTPユーザー名
  • FTPパスワード
  • ポート番号（通常21）

ステップ3: ファイルのアップロード

  1. FTPクライアントを起動し、FTP情報を入力してサーバーに接続します。
  2. ローカルのウェブサイトファイル（例: index.html、styles.css、scripts.js）をリモートサーバーのpublic_htmlディレクトリにドラッグ＆ドロップでアップロードします。
  3. アップロードが完了したら、ウェブブラウザでサイトのURLにアクセスし、公開されたウェブサイトを確認します（例: http://www.example.com）。

6. 動的サイトのデプロイ（例：Heroku）

Herokuは、動的サイトやウェブアプリケーションを簡単にデプロイできるPaaS（Platform as a Service）です。ここでは、簡単なFlaskアプリをデプロイする例を紹介します。

ステップ1: Heroku CLIのインストール

Heroku CLIをインストールします。

bashコードをコピーするbrew tap heroku/brew && brew install heroku

ステップ2: Herokuアカウントの作成

Herokuにアクセスし、アカウントを作成します。

ステップ3: Flaskアプリの準備

簡単なFlaskアプリを作成します。

app.py

pythonコードをコピーするfrom flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, Heroku!"

if __name__ == '__main__':
    app.run()

requirements.txt

plaintextコードをコピーするFlask==2.0.1
gunicorn==20.1.0

Procfile

plaintextコードをコピーするweb: gunicorn app:app

ステップ4: Herokuにデプロイ

  1. ローカルリポジトリを初期化し、Herokuにログインします。
bashコードをコピーするgit init
heroku login
  1. 新しいHerokuアプリを作成し、リモートリポジトリとして設定します。
bashコードをコピーするheroku create
  1. コードをコミットし、Herokuにプッシュします。
bashコードをコピーするgit add .
git commit -m "Initial commit"
git push heroku main
  1. ブラウザでアプリを開きます。
bashコードをコピーするheroku open

終わりに

今回紹介したデプロイ方法を参考に、自分のウェブサイトやウェブアプリケーションをインターネット上に公開してみましょう。初めてのデプロイは難しく感じるかもしれませんが、慣れてくると非常に簡単で楽しい作業です。デプロイの経験を積むことで、さらに高度な技術や手法を学び、より複雑なプロジェクトにも挑戦できるようになります。

スポンサーリンク