【無料】ローカル開発中のアプリをHTTPS対応でプライベート公開

https対応 DX化
https対応

はじめに

「LINEのLIFFアプリを開発しているけど、HTTPS対応が必要」

「ローカルで作ったアプリをテストのために一時的にネット上に公開したいけど、特定の人にだけ公開したい」

特にLINEのLIFFアプリ開発では、HTTPS環境が必須となるため、ローカル開発だけでは十分なテストができませんよね。

そんな時、私はVercelという無料サービスを使っています。誰でも簡単にHTTPS対応のWebアプリを公開できるんです。しかも「プライベート公開」という機能を使えば、世界中の誰でも見られる状態ではなく、限られた人だけがアクセスできる安全な環境が構築できます。

この記事では、プログラミング初心者の方でも実践できる「Vercelでのプライベート公開方法」を解説します。

Vercel プライベート公開とは？

まずは、Vercelとは何か、なぜプライベート公開が必要なのかを理解しましょう。初めて聞く言葉でも、実はとてもシンプルで便利なものです。

そもそもVercelって何？

Vercelは、Webアプリケーションを簡単にデプロイ（公開）できるホスティングサービスです。特に以下の特徴があります：

  • 完全無料で使えるプランがある（個人利用なら十分）
  • GitHubと連携するだけで自動的にデプロイされる※これ本当に便利！
  • 自動的にHTTPS対応のサイトが作れる
  • Next.js、React、Vueなど様々なフレームワークに対応
  • 管理画面がシンプルで初心者でも扱いやすい

つまり、ローカルで開発中のアプリを「ボタン数クリックで」インターネット上に公開できるサービスです。

なぜローカルではダメ？LINE側のHTTPS制約とは

LINEのLIFFアプリ（LINE Front-end Framework）には次のような制約があります：

  • LINEのLIFFアプリは、セキュリティ上の理由からHTTPS通信のみ許可されている
  • localhostでのテストは一部可能だが、実際のLINE環境では動作確認できない
  • 実機テストやLINE内での表示確認には、HTTPS対応のURLが必須

ローカル開発環境（例：http://localhost:3000）では、HTTPSではなくHTTP通信になるため、LIFFアプリとして登録し動作確認することができません。そのため、開発中でもHTTPS環境が必要になるのです。

プライベート公開とは？公開範囲を限定できる安心設定

「でも、開発中のものをインターネットに公開するのは怖い…」そんな不安を解消するのが「プライベート公開」という機能です。

  • 一般公開せず、許可した人だけがアクセスできる
  • URLを知っていても、認証なしではアクセスできないよう制限できる
  • テスト段階でも情報漏洩のリスクを減らせる
  • 開発途中のバグや未完成機能を一般に見られる心配がない

特にクライアントワークや社内システム開発では、この「プライベート公開」が非常に重要です。Vercelではこの機能を無料で利用できるのが大きな魅力です。

Vercel プライベート公開を始めるための準備

Vercelでのプライベート公開を始めるには、いくつかの準備が必要です。ここでは、GitHubアカウントの作成からVercelへの連携までを順番に解説します。

GitHubアカウントを作成

Vercelを最大限に活用するには、GitHubアカウントが必要です。ご存知の方が多いと思いますが簡単に説明します。

GitHubとは？

  • プログラムのソースコードを保存・管理するためのクラウドサービス
  • 複数人での共同開発が容易になる
  • コードの変更履歴を追跡できる
  • オープンソースソフトウェアの多くがGitHubで管理されている

GitHubアカウント作成手順：

  1. GitHub公式サイトにアクセス
  2. 「Sign up」をクリック
  3. メールアドレス、パスワード、ユーザー名を入力
  4. 画面の指示に従って必要な情報を入力
  5. メールアドレス認証を完了させる

これでGitHubアカウントの作成は完了です。次に、ローカルプロジェクトをGitで管理できるようにしましょう。

ローカルプロジェクトをGitで管理する方法

GitHubを使うには、まずローカル環境にGitをインストールし、プロジェクトをGit管理下に置く必要があります。

Gitのインストール方法：

  • Windows: Git for Windowsからダウンロードしてインストール
  • Mac: ターミナルでbrew install git（Homebrewがインストール済みの場合）
  • Linux: sudo apt-get install git（Ubuntu/Debian系の場合）

初めてのGit初期設定：

コマンドプロンプト（Windows）やターミナル（Mac/Linux）を開き、以下のコマンドを実行します。

git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

ローカルフォルダをGit管理下に置く：

  1. コマンドプロンプト/ターミナルでプロジェクトフォルダに移動 cd プロジェクトのパス
  2. Gitリポジトリを初期化 git init
  3. 最初のコミットを作成 git add . git commit -m "first commit"

これで、プロジェクトがGitで管理されるようになりました。

GitHubにプロジェクトをアップロードする

次に、ローカルのプロジェクトをGitHubにアップロードします。

GitHubで新しいリポジトリを作る：

  1. GitHubにログイン後、右上の「+」アイコンをクリック
  2. 「New repository」を選択
  3. リポジトリ名を入力（例：my-liff-app）
  4. 公開設定は「Private」を選択（社内/個人用なら）
  5. 「Create repository」をクリック

ローカルプロジェクトをリモートリポジトリにプッシュする：

GitHubのリポジトリ作成後に表示される指示に従って、以下のコマンドを実行します。

git remote add origin https://github.com/あなたのユーザー名/リポジトリ名.git
git branch -M main
git push -u origin main

これで、プロジェクトがGitHubにアップロードされました。

※.envなど秘匿情報が書かれたファイルは、.gitignore に追加しておいてください（Gitにコミットしない）

Vercelアカウントを作成

最後に、Vercelのアカウントを作成します。

Vercelアカウント作成手順：

  1. Vercel公式サイトにアクセス
  2. 「Sign Up」をクリック
  3. 「Continue with GitHub」を選択（GitHubアカウントで連携）
  4. GitHub連携の許可を求められたら「Authorize」をクリック
  5. 必要情報を入力して登録完了

これで、GitHubとVercelの連携ができ、プロジェクトのデプロイ準備が整いました。

ローカル開発中のアプリをVercelでプライベート公開する方法

準備が整ったら、いよいよVercelでのデプロイと、プライベート公開の設定です。

Vercelで新しいプロジェクトを作成する

まずは、GitHubにアップロードしたプロジェクトをVercelにインポートします。

GitHubからプロジェクトをインポートする方法：

Import Git Repository
Import Git Repository
  1. Vercelのダッシュボードにログイン
  2. 「Add New…」→「Project」をクリック
  3. 「Import Git Repository」セクションから、先ほど作成したGitHubリポジトリを選択
  4. プロジェクト設定画面で、フレームワークプリセットが自動選択されているか確認
    • React、Next.js、Vueなど主要なフレームワークは自動認識されます
    • 自動認識されない場合は、手動で選択可能
  5. 「Environment Variables」セクションで必要に応じて環境変数を設定
    • API KEYなど公開したくない情報はここに設定
    • LIFFアプリの場合は、LIFF IDなどを設定することもあります
  6. 「Deploy」ボタンをクリック

通常、1〜2分程度でデプロイが完了します。デプロイが成功すると、https://プロジェクト名.vercel.appのようなURLが発行されます。

プライベート公開の設定方法

デプロイが完了したら、次にプライベート公開の設定を行います。

「Environment Protection」設定方法：

  1. Vercelダッシュボードでプロジェクトを選択
  2. 「Settings」タブをクリック
  3. 左側メニューから「Privacy」を選択
  4. 「Protect Preview Deployments」をオンにする
  5. 「Add Password Protection」または「Add Team Access Only」を選択
    • パスワード保護：指定したパスワードを知っている人だけアクセス可能
    • チームアクセスのみ：Vercelチームメンバーのみアクセス可能
  6. 設定を保存

これで、あなたのアプリはプライベート公開状態となり、許可された人のみがアクセスできるようになりました。

アプリをLIFEからテスト起動する場合

最後に、VercelのURLをLIFFのエンドポイントに設定して、実際にLINE上でテストしてみましょう。

VercelのURLをLIFFのエンドポイントに設定する方法：

  1. LINE Developersコンソールにアクセス
  2. あなたのプロバイダーを選択し、LIFFアプリを作成または編集
  3. 「エンドポイントURL」に、VercelのURL（https://プロジェクト名.vercel.app）を入力
  4. 「保存」をクリック

実際にテストアクセスして動作確認：

  1. LIFFアプリのURLを取得（LINE DevelopersコンソールのLIFFタブから確認可能）
  2. スマートフォンでLINEアプリを開く
  3. 取得したLIFF URLにアクセス（トーク画面に貼り付けて開くなど）
  4. VercelでデプロイしたアプリがLINE内に表示されることを確認

もし「Environment Protection」を設定している場合は、初回アクセス時にパスワード入力が求められます。これを入力すればアプリにアクセスできます。

Vercel プライベート公開を使えばテストも安全に！

この記事では、Vercelを使ってローカル開発中のアプリをプライベート公開する方法を解説しました。

ポイント：

  • LINEのLIFFアプリ開発には、HTTPS環境が必須
  • Vercelを使えば、無料で簡単にHTTPS対応のサイトが公開できる
  • GitHubとの連携で、コード管理とデプロイが自動化できる
  • 「Environment Protection」機能で、公開範囲を限定できる
  • 開発中のアプリを安全にテストするのに最適

初めてGitやGitHub、Vercelを使う方にとっては少し手順が多く感じるかもしれませんが、一度設定してしまえば、その後のデプロイは非常に簡単です。GitHubにコードをプッシュするだけで、自動的にVercelにデプロイされるようになります。