refirio.org

Memo

メモ > 技術 > フレームワーク: Nuxt.js > AWSのEC2上で実行する
■AWSのEC2上で実行する

※Nuxt.jsのみでも実行できるが、Nginxを併用するのが定番みたい

AmazonLinux2へNuxt.js導入手順 - Qiita
https://qiita.com/deehii/items/58e6da680f322fce10ff■EC2の基本設定# localectl set-locale LANG=ja_JP.UTF-8
# timedatectl set-timezone Asia/Tokyo
■Node.jsやVue.jsをインストール$ curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash -
$ sudo yum install -y nodejs
$ node --version
v12.16.3
$ npm --version
6.14.4

$ sudo npm install -g @vue/cli
$ vue --version
@vue/cli 4.3.1
■プロジェクトを作成$ cd
$ npx create-nuxt-app my-project

create-nuxt-app v2.15.0
   Generating Nuxt.js project in my-project
 Project name my-project
 Project description My splendiferous Nuxt.js project
 Author name 
 Choose programming language JavaScript
 Choose the package manager Npm
 Choose UI framework None
 Choose custom server framework Express
 Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
 Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
 Choose test framework None
 Choose rendering mode Universal (SSR)
 Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)


プロジェクトの作成が完了すると以下が表示される

  successfully created project my-project                                                                                                               
                                                                                                                                                         
  To get started:                                                                                                                                        
                                                                                                                                                         
        cd my-project                                                                                                                                    
        npm run dev                                                                                                                                      
                                                                                                                                                         
  To build & start for production:                                                                                                                       
                                                                                                                                                         
        cd my-project                                                                                                                                    
        npm run build                                                                                                                                    
        npm run start
■起動

プロジェクト作成時に表示された案内に従って起動できる

$ cd my-project
$ npm run build
$ nohup npm run start &
[1] 2900

$ curl http://localhost:3000


案内にあるように「npm run start」だけでも起動できるが、コンソールを終了させても停止しないようにバックグラウンドで起動するといい
ログはプロジェクト内の nohup.out に出力される
killで終了できる

$ kill 2900


プロセス番号が不明な場合、以下で調べる

$ ps aux | grep npm


Nuxt.jsアプリをSSRモードでさくらVPS(CentOS7)にデプロイする手順メモ｜ss_ishii｜note
https://note.com/ss_ishii/n/ncf6418e1bb68

SSH 接続先でサーバを立ち上げっぱなしにしてログアウトするための Bash の書き方 - Corredor
https://neos21.hatenablog.com/entry/2018/09/26/080000■標準ログとエラーログ

以下のように起動すると、logs/access.log にアクセスログが、logs/error.log にエラーログが表示される
…ようだが、詳細な挙動は要検証
ログ用ディレクトリは、あらかじめ作成しておかないと起動できない

$ mkdir logs
$ nohup npm run start > logs/access.log 2> logs/error.log &


ディレクトリ名は何でもいいと思われるが、.gitignore に「/logs」という記述があるので logs という名前にしておくのが一般的かも
ログローテートもしくは日付ごとのファイルに保存できるかなどは検証したい
サーバメモの Command.txt にある「$ touch `date +%Y%m%d_%H-%M-%S`.txt」の応用で何とかなるか、もしくは他に専用の仕組みがあるか

nohup コマンドで任意の場所にログを出力する方法 - 約束の地
https://obel.hatenablog.jp/entry/20180208/1518054980

SSH 接続先でサーバを立ち上げっぱなしにしてログアウトするための Bash の書き方 - Corredor
https://neos21.hatenablog.com/entry/2018/09/26/080000

nohupで実行したコマンドの出力をnohup.out以外のファイルに保存する
https://kazmax.zpp.jp/linux/nohup_stdout.html■外部からアクセス

プロジェクト作成時点では localhost からのみアクセスできる
外部から3000番ポートを指定してアクセスできるようにするためには、起動時の設定が必要（nginxを使うなら不要かも）

$ vi package.json
  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3000"
    }
  }


$ nohup npm run start &


以下のようにアクセスできる。コンソールを終了させてもアクセスできることを確認する
http://203.0.113.1:3000/

Nuxt.js yarn start時に外部IPから接続できるように設定する | mebee
https://mebee.info/2019/12/02/post-4240/■Nginxの導入

AmazonLinux2へNuxt.js導入手順 - Qiita
https://qiita.com/deehii/items/58e6da680f322fce10ff

nginx をリバースプロキシとして使う - NuxtJS
https://ja.nuxtjs.org/faq/nginx-proxy/

Nginxが挟まっていれば、package.json でのhost＆port設定が無くてもアクセスできる
Webサーバとして高性能なNginxを挟んでおく方が、後々運用しやすいと思われる

# amazon-linux-extras install nginx1.12 -y
# vi /etc/nginx/nginx.conf
    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        #root         /usr/share/nginx/html;				… 公開ディレクトリをコメントアウト

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        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;
        }


# systemctl start nginx
# systemctl enable nginx


以下のようにアクセスできる
http://203.0.113.1/
Memo

Advertisement
