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

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

# 今回の構成
Nginx Postgre Django Dockerを使って，Webサイトを公開してみる．

# Docker環境の作成
今回の僕の構成
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/0f30505c-01ac-f347-9d78-3cca3370d69a.png)
## 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とあるので，そこを押して登録．
各端末にダウンロードするには[ここ](https://tailscale.com/download)をくりっく！

## コンテナの起動
```
docker-compose up -d 
```
で起動．
webのコンテナに入って，そこで
```
python3 manage.py migrate
```

# 今回はRaspberrypi(Linux端末)に導入
```
curl -fsSL https://tailscale.com/install.sh | sh
```
上のコマンドを実行するとtailscaleを入れることができる．

```
tailscale up
```
を実行すると，ログイン画面がでるので，ログインする．
そうすると[ここ](https://login.tailscale.com/admin/machines)に端末が表示される．

## Funnelを使うことで，VPN外の人に公開することができる
Funnelを使うにはいくつか段階を踏む必要がある．

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


## 1.2.MagicDNSとHTTPS Certificatesの有効化
まず，[ここ](https://login.tailscale.com/admin/dns)で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
でアクセスが可能になると思う．

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