Help us understand the problem. What is going on with this article?

GCE(GoogleComputeEngine)の「f1-micro」を用いて無料でNuxtやAngularの開発環境を構築してみる

More than 1 year has passed since last update.

はじめに

要旨

  • GCE ( Google Compute Engine ) の f1-micro なら無料で Ubuntu サーバ動かせるよ。
  • Nuxt や Angular などの開発環境をそこに構築してみるよ。
    • 別に Nuxt や Angular に限らず何したってよいですが……
  • メモリが貧弱で swap メモリ追加しないとロクに dev サーバすら立ち上がらないので、対応するよ。
  • リモートインスタンス内に立ち上がった localhost:3000 / :4200 の dev サーバへ外部からアクセスするために nginx 使うよ。

誰向け?

  • 無料 Linux 環境を手に入れたい人
  • ローカルに開発環境なんて作りたくない人
  • コンテナあんまり好きじゃない人

前提的注意点

  • 無料で使えるのは 1 インスタンスのみ

GCE でインスタンス(サーバ)を立てる

ざっとやること

  • GCP の利用開始手続き
  • GCP で新しいプロジェクトを作成
  • GCE でインスタンスを立てる https://console.cloud.google.com/compute
    • リージョン:us-west1 ( オレゴン )
    • ゾーン:us-west1-* ( a, b, c いずれでも可 )
    • マシンタイプ:f1-micro
    • ディスク:永続 30 GB
    • イメージ:Ubuntu 18.04 ( 現在執筆時の最新 LTS ver. として )
    • ファイアウォール:80, 443 トラフィックを許可
    • ネットワーク:外部 IP 固定
  • 詳細は参考記事へ……
    • 公開鍵の登録と SSH 接続確認
    • 課金ログ書き出しの設定
    • セキュリティまわりの確保

参考記事

サーバに SSH 接続してやること

前置き

  • Ubuntu を前提としていますので CentOS とかなら apt を yum に置き換えるなどしてください。

初期設定

  • パッケージ更新
sudo apt-get update
sudo apt-get upgrade
sudo apt update
sudo apt upgrade
  • node.js と npm をインストール
sudo apt install -y nodejs npm
  • yarn インストール
    • 適当に home あたりで
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn

swap メモリを追加

  • 物理メモリ/ suwap メモリの確認方法
free -m
  • cd で swapfile 作成するところに移動した後で以下を実行
    • *** G のところが容量。 5GB 追加したければ、 5G と入力
sudo fallocate -l ***G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
  • /etc/fstab に下記の1行を追加
/swapfile none swap sw 0 0
  • 再起動
sudo shutdown -r now

参考記事

nginx

  • インストール
sudo apt-get install nginx
  • conf を書く
    • port 番号を適宜書き換える ( デフォルトの場合 nuxt は 3000 / angular は 4200 )
cd /etc/nginx/sites-available/
sudo vi default
server {
  listen 80 default_server;
  listen [::]:80 default_server;
  index index.html;

  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}
  • conf 再読込
sudo nginx -s reload

Nuxt / Angular のプロジェクト作成と dev サーバー起動

Nuxt の場合

  • vue-cli のインストール
sudo npm i -g @vue/cli @vue/cli-init
  • プロジェクトを作成したいディレクトリへ移動

  • プロジェクト作成 ( vue init の場合 )

    • nuxt-community/starter-template 以外を選んでももちろん構いません
vue init nuxt-community/starter-template my-project-name
  • プロジェクト作成 ( create-nuxt-app の場合 )
sudo npm install -g create-nuxt-app
create-nuxt-app my-project-name
  • dev サーバー起動
    • 2 行目の yarn は初回時にパッケージインストールを走らせるため実行
cd my-project-name
yarn
yarn dev
  • localhost:3000 で起動するので、ブラウザからインスタンスに割振った固定外部 IP を直で叩いて、表示されるかどうか確認
    • 表示されなかったら nginx の設定を要確認

Angular の場合

  • angular-cli のインストール
npm install -g @angular/cli
  • プロジェクトを作成したいディレクトリへ移動

  • プロジェクト作成

ng new my-project-name
  • dev サーバー起動
cd my-project-name
ng serve --open
  • localhost:4200 で起動するので、ブラウザからインスタンスに割振った固定外部 IP を直で叩いて、表示されるかどうか確認
    • 表示されなかったら nginx の設定を要確認

おわりに

  • アメリカ西海岸に置いてあるメモリ 512MB の共有サーバなので、遅いですが、今のところ無料で好き勝手に使えるのはありがたい話です。
    • ちなみに、この環境だと、ホットリロードの速度では Nuxt が Angular を圧倒してます。
  • この環境にさらにデータベースを置いて走らせたりすると相当厳しそうですが、パフォーマンスチューニングのしがいがあると燃える人であれば……
  • Angular なら Stackblitz 使えばいいんじゃん? とか冷たいこと言わないでください。
Hi_Noguchi
ピティナ(一般社団法人全日本ピアノ指導者協会) 本部 CTO / 株式会社東音企画 外部 CTO。 育休一年 ( 2019/03/01 ~ 2020/02/29 ) 取得完了!
https://hi-noguchi.com/
piano
ピティナは音楽指導者の団体で、また世界最大のピアノコンクールを主催する団体でもあります。 「~音楽の必要性を社会に向けて立証する~」ため、エンジニアを採用し始めました!!
http://recruit.piano.or.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした