Zenn
🐈

vscodeをiPadでつかえるようにする話

2022/06/19に公開
Docker
iPad
Code-server
Caddy
#
frp
tech

ノーパソって重いですよね...。私は大学までチャリ通をしているのですが、ノーパソの重さに嫌気がさしてきました。
そこで、今回はウェブ上でvscodeを扱えるようにするcode-serverをhttpsで公開してみようと思います！

code-server

Docker内にインストールしたい言語は人それぞれだと思うので、今回はcode-serverとpythonの導入だけ行います。
また、imageは今回arch linuxを使用します。

code-docker
FROM archlinux:latest

RUN pacman -Syu --noconfirm
#sudo apt update
#sudo apt upgradeと同じ意味です
RUN pacman -S wget --noconfirm
RUN pacman -S sudo --noconfirm
RUN pacman -S python --noconfirm
#wget,sudo,pythonのインストールをおこないます
RUN wget https://github.com/coder/code-server/releases/download/v4.4.0/code-server-4.4.0-linux-amd64.tar.gz
#code-serverのインストールを行います
RUN tar -xzvf code-server-4.4.0-linux-amd64.tar.gz
#解凍
RUN rm code-server-4.4.0-linux-amd64.tar.gz
#削除
RUN mv code-server-4.4.0-linux-amd64 code-server
#リネーム
ARG USERNAME=user
ARG PASS=1234
ARG GROUPNAME=master
ARG UID=1000
ARG GID=1000
RUN groupadd -g $GID $GROUPNAME
RUN useradd --system --create-home $USERNAME -u $UID -g $GID \
  && echo "%$GROUPNAME   ALL=(ALL) ALL" >> /etc/sudoers
RUN echo $USERNAME:$PASS | chpasswd
#一般ユーザの追加
docker-compose
services:
  code-server:
    build: 
      context: .
      dockerfile: "code-docker"
    user: "${UID}:${GID}"
    ports:
      - "0.0.0.0:80:80"
    environment:
      - PASSWORD=$PASSWORD
    volumes:
      - "./home:/home/user"
      #homeというディレクトリをマウントします
      # - "/var/run/docker.sock:/var/run/docker.sock"
      # dockerをdockerの中から使えるようにします
      # 参照:https://stackoverflow.com/questions/63602750/how-to-create-and-add-user-with-password-in-alpine-dockerfile
    tty: true
    working_dir: /home/user
    command: /code-server/code-server --port 80 --bind-addr=0.0.0.0:80
.env
PASSWORD=1234
UID=1000
GID=1000

あとはmkdir homeしたあとにdocker-compose up -dでcode-serverが立ちます。
loaclhost:80にブラウザからアクセスすればvscodeをいじれます。

nat越え

このままでは、ipadからアクセスはできないので、インターネット上に公開したいですね。ただ私の住んでる寮ではポート開放できないため、frpを使用してazure vm経由で公開します。

ドメイン

まずは公開するのに必要なドメインを取得します。
今回はfreenomを使用しました。
http://www.freenom.com/en/index.html

Azure vm

今回はStandard B1lsを借りてます。tokyoリージョンでも月６００円程度なのでAzure for Studentsでもらえる年１万円で実質無料で利用できます。
また、frpだけではhttp接続になってしまうため、caddyを利用します。

frps.ini
[common]
token=1234
bind_port = 7000
vhost_http_port = 40
vhost_https_port = 500
Caddyfile
mydomain.com/code/* {
    encode gzip zstd
    uri strip_prefix /code
    reverse_proxy * {
        to localhost:40
    }
}
shell
wget https://github.com/fatedier/frp/releases/download/v0.43.0/frp_0.43.0_linux_amd64.tar.gz
tar -xzvf frp_0.43.0_linux_amd64.tar.gz
mv frp_0.43.0_linux_amd64 frp
wget https://github.com/caddyserver/caddy/releases/download/v2.5.1/caddy_2.5.1_linux_amd64.deb
sudo apt install ./caddy_2.5.1_linux_amd64.deb
sudo caddy start
/frp/frps -c /frp/frps.ini

docker

あとはfrpcをdockerを利用して起動すれば終わりです。
docker-composeに以下を追記してください。
frpc.iniにはazure vmのアドレスを書いてください。

frp-docker
FROM alpine

RUN wget https://github.com/fatedier/frp/releases/download/v0.43.0/frp_0.43.0_linux_amd64.tar.gz
RUN tar -zxf frp_0.43.0_linux_amd64.tar.gz
RUN mkdir frpc
RUN cd frp_0.43.0_linux_amd64\
        && mv frpc /frpc
RUN rm -rf frp_0.43.0_linux_amd64.tar.gz frp_0.43.0_linux_amd64
docker-compose
services:
  frpc:
    build: 
      context: .
      dockerfile: "frp-docker"
    restart: unless-stopped
    links:
      - "code-server:code"
    volumes:
      - "./frpc/frpc.ini:/frpc/frpc.ini"
    command: "/frpc/frpc -c /frpc/frpc.ini"
frpc/frpc.ini
[common]
token = 1234
server_addr = xx.xx.xx.xxx
server_port = 7000

[code]
type = http
local_ip=code
local_port = 80
custom_domains = mydomain.com

docker-compose upで終わりにしましょう。

まとめ

結局ipad用のキーボードを持ってなかったため快適な環境とは言い難かったです。
reactなどでweb制作をしたい場合はngrokなどを利用してnat越えしてあげればいいと思います。

Discussion