tailscaleでDjangoで作ったWebAppを公開する方法

tailscaleでDjangoで作ったWebAppを公開したい！

Djangoでアプリを公開する際には，AWSやHerokuを使ったり，クラウド系を使うことが多く，ここら辺のサービスは有料であることが多い．個人でサーバーとして使える端末があるのに，そっちにお金を払うのはもったいなく感じる．．．
そんな人にtailscale!

今回の構成

Nginx Postgre Django Dockerを使って，Webサイトを公開してみる．

Docker環境の作成

今回の僕の構成

Nginx,Postgre,Djangoの環境を用意する．

Dockerfile

FROM python:3.11
ENV PYTHONUNBUFFERED 1
RUN mkdir ./code
WORKDIR /code
COPY requirements.txt /code/
RUN pip install -r requirements.txt
COPY . /code/

docker-compose.yml

version: '3'

services:
  db:
    restart: always
    image: postgres
    ports:
      - 5432:5432
    environment:
      - POSTGRES_PASSWORD=postgres
    volumes:
      - ./db:/var/lib/postgresql/data
    container_name: postgres

  web:
    restart: always
    build: .
    command: bash -c "python manage.py runserver 0.0.0.0:8000"
    volumes:
      - .:/code
    ports:
      - 8000:8000
    depends_on:
      - db
    container_name: django

  nginx:
    restart: always
    build: ./nginx
    ports:
      - 80:80
    depends_on:
      - web
    container_name: nginx

volumes:
  db-data:

上記がDockerでの環境構築

Nginxの設定

./nginx/Dockerfile

FROM nginx:latest

# デフォルトのconfを消して、別の設定を追加
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d

./nginx/nginx.conf

upstream django {
    # コンテナのサービス名を指定し、名前解決
    server web:8000;
}

server {
    # 80ポートで待ち受け
    listen 80;
    client_max_body_size 64m;
    location / {
        proxy_pass http://django;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
     # gzip圧縮
        gzip on;
        gzip_min_length 1k;
        gzip_types text/css text/javascript application/x-javascript application/javascript application/json image/svg+xml;
        gzip_disable "msie6";
    }

}

./nginx/uwsgi_params

uwsgi_param  QUERY_STRING       $query_string;
uwsgi_param  REQUEST_METHOD     $request_method;
uwsgi_param  CONTENT_TYPE       $content_type;
uwsgi_param  CONTENT_LENGTH     $content_length;

uwsgi_param  REQUEST_URI        $request_uri;
uwsgi_param  PATH_INFO          $document_uri;
uwsgi_param  DOCUMENT_ROOT      $document_root;
uwsgi_param  SERVER_PROTOCOL    $server_protocol;
uwsgi_param  REQUEST_SCHEME     $scheme;
uwsgi_param  HTTPS              $https if_not_empty;

uwsgi_param  REMOTE_ADDR        $remote_addr;
uwsgi_param  REMOTE_PORT        $remote_port;
uwsgi_param  SERVER_PORT        $server_port;
uwsgi_param  SERVER_NAME        $server_name;

Djangoの設定

./mysite/settings.py

DEBUG = False
ALLOWED_HOSTS = ["*"] #自分の公開予定のDNSへ変更

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.postgresql_psycopg2",
        "NAME": "postgres",
        "USER": "postgres",
        "PASSWORD": "postgres",
        "HOST": "db",
        "PORT": 5432,
    }
}

上記設定で使えます．

tailscaleを端末に導入する

tailscaleのアカウントを作成する．
先ほどのリンクに行くと，try for freeとあるので，そこを押して登録．
各端末にダウンロードするにはここをくりっく！

コンテナの起動

docker-compose up -d 

で起動．
webのコンテナに入って，そこで

python3 manage.py migrate

今回はRaspberrypi(Linux端末)に導入

curl -fsSL https://tailscale.com/install.sh | sh

上のコマンドを実行するとtailscaleを入れることができる．

tailscale up

を実行すると，ログイン画面がでるので，ログインする．
そうするとここに端末が表示される．

Funnelを使うことで，VPN外の人に公開することができる

Funnelを使うにはいくつか段階を踏む必要がある．

1.MagicDNSの有効化
2．HTTPS Certificatesの有効化
3.キーの作成
4．ポート転送の設定をする
5.funnelをオンにする
6.外部からTailscaleノードのIPを利用してアクセスする

1.2.MagicDNSとHTTPS Certificatesの有効化

まず，ここでDNSとHTTPSの設定を行う．
MagicDNSとHTTPS Certificatesを有効にする

3.キーの作成

その後，Raspberrypi上で

例
sudo tailscale cert raspberrypi.・・・・.ts.net

を実行することで，HTTPSに対応させることができる．

4.ポートの転送

tailscaleでは空いているポートが決まっていて三つくらい？あるので，そこに転送するようにする．
ポートの転送を行う．
今回の場合は，nginxでのポート80を指定する
それをtailscaleの443ポートに転送する設定を行う．
/の位置はどこのパスを公開するかによって変更する必要がある．

sudo tailscale serve https:443 / http://127.0.0.1:80

また，

tailscale funnel port(数字) on

で，ポート指定も可能です

5.Funnelの有効化

これまでで，設定が一通り変更し終わったので，

sudo tailscale funnel on

をすることで，funnelを有効化できる．

6.外部からんアクセスを試みる

https://TailscaleノードのIPアドレス
か
https://登録端末名.tail,,,.ts.net
でアクセスが可能になると思う．

終わりに

私自身，色々試しながらやっていると途中で，抜けているところも多々あると思いますので，何かありましたらコメントでお願いします．
また，抜けていた部分を見つけることができた場合は追記していきますのでよろしくお願いします．