2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

無料でiPadでVScodeが使いたい!!!!!!

Last updated at Posted at 2021-04-14

#結論

  • 月額数十円のほぼ無料になりました(お名前.comとかで)
  • VScodeの代わりにcode-serverをGCPの無料枠で使用しましたがCPUが常時70%稼働とか言う事故みたいな感じになりました。

そんなわけで完全な無料にはならなかったww

#注意

半年ぐらい前にやったメモをそのまま書き写しただけ
まじで情報なさすぎて同じように困った人の解決のきっかけになれば程度に作ったので過度な期待は厳禁

#仕様

『インフラ』
・GCPの無料枠
・cloudDNS(月に50円ぐらい)
・お名前.com(金額はドメインによる1円とかもあるみたい)
・nginxでリバースプロキシ
・SSL証明書発行はcertbot

『アプリ』
・code-server(VScodeのブラウザ版みたいなやつ)

『その他』
・Golang(とりあえずなんか書きたかった)
・Gin  (Goのフレームワーク)

#手順

GCPの無料枠に接続するのは偉大なる先人がいるのでお任せします。
GCEインスタンスにSSH接続してからの話

『nginxをインストールする』

terminal
$ sudo apt-get install nginx
$ sudo service nginx status # 動作してるか確認
                            # GCEのhttpトラフィックを許可して外部IPにアクセス→welcome to nginxならok
$ sudo vi /etc/nginx/nginx.conf
$ sudo vi /etc/nginx/conf.d/code-server-<アプリ名>.conf # これなんでやったのか分からん、

『ドメインの登録』
・GCPのファイヤーウォールにHTTPトラフィック、HTTPSトラフィックの許可

・GCPの外部IPアドレス→静的IPアドレスの予約→リージョン:オレゴン、接続先:自分のインスタンス

・外部IPが変更されたのでSSH接続し直し

・cloudDNSでホスティングゾーン作成(50円/月)

・静的IPアドレス予約した外部IPをIPv4でゾーンに追加する

・お名前.comでドメイン名を取得

・レコードセットを登録


『nginxにHTTP接続する』

terminal
$ sudo apt-get install nginx # nginxのインストール
$ sudo vi /etc/nginx/conf.d/<アプリ名>.conf # NGINXのCOFIGファイルの内容書く

・http://<アプリ名>にブラウザからアクセスしてnginxの確認できるか


『SSL証明書発行』

terminal
$ sudo apt-get git
$ git clone https://github.com/certbot/certbot.git
$ sudo mv certbot/certbot-auto /usr/local/bin
$ sudo chown root /usr/local/bin/certbot-auto
$ sudo chmod 0755 /usr/local/bin/certbot-auto
$ sudo /usr/local/bin/certbot-auto

『ssl証明書発行をクーロンでバッチ処理する』

terminal
$ sudo vi /etc/cron.d/letsencrypt

以下を追記

letsencrypt
00 01 01 * *  /usr/local/bin/certbot-auto renew --force-renew --post-hook "sudo service nginx restart"

『nginxにHTTPS接続』

terminal
$ sudo vi /etc/nginx/conf.d/<アプリ名>.conf 

Nginxのconfigファイルに追記

conf
server {
  listen 80;
  server_name <アプリ名>;
  return 301 https://<アプリ名>$request_uri;
}

server {
  server_name <アプリ名>;
  listen 443 ssl http2; # managed by Certbot
  ssl on;
  ssl_certificate /etc/letsencrypt/live/<アプリ名>/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/<アプリ名>/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

  location / {
    proxy_pass http://127.0.0.1:25565;
    proxy_set_header Host $http_host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection upgrade;
    proxy_set_header Accept-Encoding gzip;
    auth_basic "Restricted";			# basic認証が欲しいなら
    auth_basic_user_file /etc/nginx/htpasswd_<アプリ名>; # 同上
  }
}
terminal
$ sudo systemctl restart nginx # 変更を保存するために再起動

https://<アプリ名> にアクセスする
※リバースプロキシの設定してるのに肝心の読み取り先がないので503エラーが出るはず

GCEのhttpトラフィックを許可するのチェックを外す 


『code-serverをインストールする』

terminal
$ curl -fOL https://github.com/cdr/code-server/releases/download/v3.8.0/code-server_3.8.0_amd64.deb

$ sudo dpkg -i code-server_3.8.0_amd64.deb

$ sudo vi ~/.config/code-server/config.yaml
config.yaml
Bindadrr 0.0.0.0:25565 # defaultの8080はnginxが使う
Auth password # 認証方法は今のところパスワードだけ
Pass <デフォでok>

『code-serverにアクセス』

code-serverを起動してhttps://<アプリ名>にアクセスする

以下、起動したりしたときに使うコマンド

terminal
$ systemctl --user enable --now code-server	# シンボリックリンク作って自動起動
$ systemctl --user disable --now code-server # 停止
$ systemctl --user restart code-server		# 再起動

『Golangをインストールする』

terminal
$ wget https://dl.google.com/go/go1.15.6.linux-amd64.tar.gz # 最新版をDL
$ sudo tar -C /usr/local -xzf go1.15.6.linux-amd64.tar.gz # 解凍

『パスを永続化する』

terminal
$ echo "$PATH:/usr/local/go/bin” >> ~/.profile
$ source ~/.profile # 再起動せず即時適用

『Go/Ginをインストールする』

goの環境変数を確認する(GOROOTとかパッケージまとめるGOPATHとか)

terminal
$ go env
terminal
$ go env -w GO111MODULE=on # 1.11とかからGOPATH配下にプロジェクトを作らなくて良くなったが明示的にオンにしておく
$ mkdir <myGinProjectName> && cd <myGinProjectName>
$ go mod init <myGinProjectName>		#go modを初期化(新規Moduleとして定義)
$ go get -u github.com/gin-gonic/gin	#ginをダウンロードしてmoduleに当てる
$ cat go.mod							#依存関係がずらっと並んでる
$ vi test.go							#クイックスタートしてみる
test.go
package main

import (
        "github.com/gin-gonic/gin"
)

func main() {
        r := gin.Default()
        r.GET("/ping", func(c *gin.Context) {
                c.JSON(200, gin.H{
                        "message": "pong",
                })
        })
        r.Run("127.0.0.1:8888") // 0.0.0.0:8888 でサーバーを立てる
}
terminal
$ go run main.go # code-serverのterminalとかでゲットリクエストを送ってみる
$ curl http://127.0.0.1:8888/ping			#レスポンスが帰って来てたらOK

###いいiPadプログラミングを!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?