はじめに
私もそろそろ サービスオーナー になろうかなと思い立ち、個人開発していたサービスである 日程調整📝 を XServer で公開しました。その際に実行した手順を記録します
↓ 日程調整📝 のご利用方法動画（Youtube）
↓ 技術スタックはこちら
注意書き
XServer にサービスを公開することによって生じるセキュリティ上の危険性は０ではないと思います。ここから先はサイバーセキュリティに詳しい方と一緒に読まれることを推奨します
手順0: XServer 契約
↓ アカウントをお持ちでない方はまずこちらからご検討ください
エックスサーバー お申し込みフォーム
↓ 私は先輩のおすすめで左側を選択しました
手順1: SSH の設定
SSH の設定を行います
↓ 参考にさせていただいたサイトはこちら
SSH接続する(Xserver from Win, Mac)
- サーバー > SSH設定 を開き、「登録して秘密鍵をダウンロードする」をクリック（↑画像参照）
- /Users/いつもの自分のユーザー名/.ssh に、さきほどDLした秘密鍵を配置
- /Users/いつもの自分のユーザー名/.ssh/config に以下のコードブロックの内容を書き込む
- /Users/いつもの自分のユーザー名/.ssh/config で ssh xserver と入力
- yes/no/[fingerprint] の質問をされたら yes を入力
- 鍵の作成時に設定したパスフレーズを聞かれるので入力（設定しなかった場合は Enter）
Host xserver
HostName <自分のサーバーID>.xsrv.jp
User <自分のサーバーID>
Port 10022
IdentityFile ~/.ssh/<さきほどDLした秘密鍵の名前>.key
↓ <自分のサーバーID> というのは、画像の黄色部分に書かれています。XServer 作成時に自分で決めたものです
手順2: MySQL の設定
次に MySQL の設定を行います
- GUI からポチポチつくる
XServer の MySQL 設定ページをまるっとコピペして ChatGPT に聞けば、DB の作成の仕方や、MySQL に接続するためにどのシークレットにどの値を入れればいいか教えてくれます（※無料版 ChatGPT をご利用の場合はデータが学習に利用されるため、シークレットを見せるのはNG です）
手順3: python 仮想環境の設定
次に python 仮想環境の設定を行います
↓ python 自体はもともと XServer にありそうですが、pip が使えないので python 仮想環境を作成していきます。なぜ使えないかというと、レンタルサーバーで sudo 権限がないからです（多分）
↓ 参考にさせていただいたサイトはこちら
PythonのWebアプリをXserverで動かす(Flask編)
レンタルサーバー(Xserver)でFastAPIを動かす
【React × Python FastAPI】レンタルサーバー「ColorfulBox」でWebアプリをデプロイする方法
- サーバに SSH 接続する
- python 仮想環境を作って中に入る
# サーバに SSH 接続した状態から始める
wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh
bash Miniconda3-latest-Linux-x86_64.sh
source .bashrc
conda --version
python --version
conda create --name py312 python=3.12
conda activate py312
which python
これで py312 という仮想環境を作成し、中に入ることができました（3.12という数字はご利用の python に合わせてご変更ください）。ここからの作業は基本的に py312 内で行います
↓ ちなみに私のはこんな感じです
手順4: 依存関係をインストール
次に依存関係のインストールを行います
- ファイルマネージャを開く
- ~/<自分のサーバーID>.xsrv.jp/public_html/<任意のfastAPIディレクトリ名> を作成する
- 依存関係をインストール
↓ 2. のディレクトリを作成するっていうのは、CLI からは画像のようになっていれば OK です。ファイルマネージャ使わずに CLI から作成しても同じです
↓ 依存関係のインストール方法は、自分はこれでやりました
# サーバーに SSH 接続し、仮想環境に入った状態から始める
cd ~/<自分のサーバーID>.xsrv.jp/public_html/<任意のfastAPIディレクトリ名>
pip install fastapi a2wsgi flup python-dotenv pymysql sqlalchemy -t .
# ↑ ご利用の依存関係、バージョンに合わせ適宜ご変更ください
インストールが終わると、~/<自分のサーバーID>.xsrv.jp/public_html/<任意のfastAPIディレクトリ名> 配下に先ほどインストールしたもののファイルがたくさん作成されます
手順5: アクセスに関するファイルの設定
次にアクセスに関するファイルの設定を行います
- 指定の位置に以下の２つのファイルを設置する
- 権限を設定する（ファイルマネージャからでも、CLIからでも）
#! /home/<自分のサーバーID>/miniconda3/envs/py312/bin/python
import os
import sys
# 標準エラーをファイルにリダイレクトしてエラーを確認できるようにする
sys.stderr = open('error.log', 'a')
import a2wsgi
from flup.server.fcgi import WSGIServer
from main import app
if __name__ == '__main__':
os.environ.setdefault("PATH_INFO", "")
wsgi_app = a2wsgi.ASGIMiddleware(app)
WSGIServer(wsgi_app).run()
↑ #! /home/<自分のサーバーID>/miniconda3/envs/py312/bin/python の部分は、which pythonの実行結果と合わせる必要があります
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /<任意のfastAPIディレクトリ名>/
# 静的ファイルとディレクトリは除外
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# FastAPI に処理を渡す
RewriteRule ^(.*)$ <任意の英単語>.fcgi/$1 [QSA,L]
</IfModule>
| ファイル名 | 権限 |
|---|---|
| <任意の英単語>.fcgi | 755 |
| .htaccess | 644 |
ここは自分は結構、レンタルサーバというものの本質的な理解ができておらず難しかったです。AWS の ECS と色々勝手が違う感じがしました。
ChatGPT にたくさん聞いてしまいましたが、今後もっと勉強していきたいです。
手順6: プロジェクトに関するファイルの設定
次にプロジェクトに関するファイルの設定を行います。
- ファイルマネージャを開く
- ~/<自分のサーバーID>.xsrv.jp/public_html/<任意のfastAPIディレクトリ名> に移動
- main.py や database.py などのプロジェクトに関するファイルをアップロード
- （権限変更は不要だったはず）
ここまで済んだら http(s)://<自分のサーバーID>.xsrv/<任意のfastAPIディレクトリ名>/docs にアクセスし、FastAPI の docs が見られることを確認してください
はじめは全然うまくいかない
自分の場合はずっと 500 や 404 が出ていて、何回かディレクトリ消して作り直したりしました。XServer のキャッシュ機能が原因らしいです
FastAPI のディレクトリ構成
日程調整📝 はエンドポイント5個ぐらいの超小規模サービスなので、main.py と同階層に全ての .py ファイルを置いて開発していました。FastAPI のディレクトリ構成が複雑になると、ちょっと設定変わるのかもしれません
個人的つまづきポイント
❌ from . import models, schemas, crud
⭕️ import models, schemas, crud
この辺りは error.log を出せばどこで詰まってるか答え教えてくれるので、それを見ながら進めるのがオススメです
手順7: フロントの設定
次にフロントの設定を行います
- ローカルでreactのコンテナ内に入る
- npm run buildを実行（package.json で「"build": "vite build"」となっていることが前提）
- dist ディレクトリが作成されるので、その中のものを以下のようにXServerに配置
| ローカル | XServer |
|---|---|
| dist/index.html | public_html/index.html |
| dist/vite.svg | public_html/vite.svg |
| dist/assets/index-????.js | public_html/assets/index-????.js |
| dist/assets/index-????.css | public_html/assets/index-????.css |
環境変数
React の環境変数はビルド時に埋め込まれるらしく、特に .env ファイルを置く必要はないです
個人的つまづきポイント
- ローカルの環境変数が残るので、Docker のファイルとかを全部消してからコンテナを build up して npm run build しなければならない
- はじめ getEnvか何か使っていたが、import.meta.env.VITE_ENVNAME; の形式で環境変数を読まなければならない
ここまで済んだら http(s)://<自分のサーバーID>.xsrv にアクセスし、フロントが表示されることを確認してください
はじめは全然うまくいかない
大丈夫です、console.log とかしてエラーを1つ1つ解決していけばできるようになります🔥
手順8: その他
HTTPS
GUI から SSL ON にできます
キャッシュ
デフォルト ON だったのですが、設定どうしてもつまづいた時に OFF にしました。でも解決のキーファクターだったかは分からないし、基本的に触らないで済むならその方が良さそうです
ドメイン名
というかサーバIDダサい気がしてきました（自分で決めておいてなんだけど…）
余談: AWS ECS でも公開しました
↓ お勉強目的で AWS ECS で公開しましたが、予算オーバーなので XServer に移動しました
まとめ
先人たちの記事と有料版ChatGPTのおかげで、初心者ながらなんとか一般公開に辿り着きました…！
はじめはどうなることかと思いましたが、終わってみると楽しかったです。これからももっと、新しいことを学んでいきたいなと思いました