lightsailとnode.jsとexpressとvscodeでWebアプリを作ってみる

admin

3年前

1, lightsailインスタンスをnode.jsで作ってみる。apacheもexpressもインストール済

2, ブラウザでアクセスすると手順が書いてある
https://docs.bitnami.com/aws/infrastructure/nodejs/get-started/get-started/

3, ブラウザベースの SSH クライアントを使用して接続する

# プロジェクト用フォルダ生成
sudo mkdir /opt/bitnami/projects
sudo chown $USER /opt/bitnami/projects
cd /opt/bitnami/projects

# expressプロジェクト生成
express --view pug sample
cd sample
# 必要なパッケージをインストール
npm install

# http://IPアドレス:3000 でWebサーバ起動
DEBUG=sample:* ./bin/www

# 以下の表示がされ、ブラウザでアクセスされるのを待つ。ctrl+Cでキャンセル
> sample@0.0.0 start /opt/bitnami/projects/sample
> node ./bin/www

sample:server Listening on port 3000 +0m

# プロジェクト用フォルダ生成

sudo mkdir /opt/bitnami/projects

sudo chown $USER /opt/bitnami/projects

cd /opt/bitnami/projects

# expressプロジェクト生成

express --view pug sample

cd sample

# 必要なパッケージをインストール

npm install

# http://IPアドレス:3000 でWebサーバ起動

DEBUG=sample:* ./bin/www

# 以下の表示がされ、ブラウザでアクセスされるのを待つ。ctrl+Cでキャンセル

> sample@0.0.0 start /opt/bitnami/projects/sample

> node ./bin/www

sample:server Listening on port 3000 +0m

4, ポート3000は閉じているので、IPv4 ファイアウォールで追加するとWelcome to Expressが表示される
http://IPアドレス:3000/

5, apacheのドキュメントルートを変更

sudo npm install forever -g
# デーモン化して、コマンドを打たなくても自動起動させる
forever start /opt/bitnami/projects/sample/bin/www
warn:    --minUptime not set. Defaulting to: 1000ms
warn:    --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms
info:    Forever processing file: /opt/bitnami/projects/sample/bin/www

# httpとhttpsのvhost設定ファイルを作成
sudo cp /opt/bitnami/apache/conf/vhosts/sample-vhost.conf.disabled /opt/bitnami/apache/conf/vhosts/sample-vhost.conf
sudo cp /opt/bitnami/apache/conf/vhosts/sample-https-vhost.conf.disabled /opt/bitnami/apache/conf/vhosts/sample-https-vhost.conf

# httpの方だけ変更
vi /opt/bitnami/apache/conf/vhosts/sample-vhost.conf
  <VirtualHost _default_:80>
    ServerAlias *
    DocumentRoot "/opt/bitnami/projects/myapp/public"
    <Directory "/opt/bitnami/projects/myapp/public">
      Require all granted
    </Directory>
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
  </VirtualHost>

# apacheを再起動
sudo /opt/bitnami/ctlscript.sh restart apache

sudo npm install forever -g

# デーモン化して、コマンドを打たなくても自動起動させる

forever start /opt/bitnami/projects/sample/bin/www

warn: --minUptime not set. Defaulting to: 1000ms

warn: --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms

info: Forever processing file: /opt/bitnami/projects/sample/bin/www

# httpとhttpsのvhost設定ファイルを作成

sudo cp /opt/bitnami/apache/conf/vhosts/sample-vhost.conf.disabled /opt/bitnami/apache/conf/vhosts/sample-vhost.conf

sudo cp /opt/bitnami/apache/conf/vhosts/sample-https-vhost.conf.disabled /opt/bitnami/apache/conf/vhosts/sample-https-vhost.conf

# httpの方だけ変更

vi /opt/bitnami/apache/conf/vhosts/sample-vhost.conf

ServerAlias *

DocumentRoot "/opt/bitnami/projects/myapp/public"

Require all granted

</Directory>

ProxyPass / http://localhost:3000/

ProxyPassReverse / http://localhost:3000/

</VirtualHost>

# apacheを再起動

sudo /opt/bitnami/ctlscript.sh restart apache

http://IPアドレスで、Welcome to Expressが表示される事を確認したら、IPv4 ファイアウォールで追加したポート3000は削除しておく

6, vscode+RemoteSSHで接続
ローカルの.ssh/configに接続情報を追記
/opt/bitnami/projects/sample/ をプロジェクトルートにする

views/index.pugを修正

extends layout

block content
  h1= title
  //- p Welcome to #{title}
  p Hello to #{title}

extends layout

block content

h1= title

//- p Welcome to #{title}

p Hello to #{title}

Hello to Expressに変更されていればOK

関連記事