vscodeをiPadでつかえるようにする話
ノーパソって重いですよね...。私は大学までチャリ通をしているのですが、ノーパソの重さに嫌気がさしてきました。
そこで、今回はウェブ上でvscodeを扱えるようにするcode-serverをhttpsで公開してみようと思います!
code-server
Docker内にインストールしたい言語は人それぞれだと思うので、今回はcode-serverとpythonの導入だけ行います。
また、imageは今回arch linuxを使用します。
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
#一般ユーザの追加
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
PASSWORD=1234
UID=1000
GID=1000
あとはmkdir homeしたあとにdocker-compose up -dでcode-serverが立ちます。
loaclhost:80にブラウザからアクセスすればvscodeをいじれます。
nat越え
このままでは、ipadからアクセスはできないので、インターネット上に公開したいですね。ただ私の住んでる寮ではポート開放できないため、frpを使用してazure vm経由で公開します。
ドメイン
まずは公開するのに必要なドメインを取得します。
今回はfreenomを使用しました。
Azure vm
今回はStandard B1lsを借りてます。tokyoリージョンでも月600円程度なのでAzure for Studentsでもらえる年1万円で実質無料で利用できます。
また、frpだけではhttp接続になってしまうため、caddyを利用します。
[common]
token=1234
bind_port = 7000
vhost_http_port = 40
vhost_https_port = 500
mydomain.com/code/* {
encode gzip zstd
uri strip_prefix /code
reverse_proxy * {
to localhost:40
}
}
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のアドレスを書いてください。
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
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"
[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