XserverVPSでNuxtアプリケーションを作成して公開する

もちろんできるよ。

今回はXserverVPSを使ってNuxtアプリを作って公開したいと思います。Nuxtアプリを公開したいけどどうやってXserverVPSで公開するんだろう？と気になっている方は参考にしてみてください。

XserverVPSでNuxtアプリを公開していきましょう。

XserverVPSでサーバーを立てる

まずはXserver VPSでサーバーを立てます。具体的な申し込み手順は以下の記事で詳しく書いているので、わからなかったら参考にしてみてください。

【手順解説】エックスサーバーVPSの申し込み方法と始め方を紹介します。

2022.12.21

エックスサーバーVPS使ってみたいんだけどどう始めたらいいんだろう？ そんな疑問を解消するためにこの記事ではエックスサーバーVPSの申し込み方法と始め方を書いていきます。 サーバーの作成までやるので、順番通りにやれば自分のサーバーが立っている状態になります。 記事の内容 エックスサーバーVPSの申し...

Ubuntuでサーバーを立てる

今回はOSだけ選択してサーバーを立ててやろうと思います。アプリケーションでnode.jsを選択すれば、node.jsを使えるサーバーに設定してくれるからそれでもいいかもしれないですね。

（ちなみにOSの再インストールなんかは後でもできるので、ここでミスっても大丈夫です）

そうだね、それとSSH Keyはここで作っておくと楽だよ。

SSH Keyは自分で作成したものを手動でサーバー内に設定することもできますが、ここでやっておくと作ってくれるので楽です。秘密鍵もダウンロードすることができます。

立てたサーバーにSSH接続する

立てたサーバーにはSSH接続して作業したいのでSSH接続します。SSH接続する方法に関しては以下の記事で書いたので、わからなかったら参考にしてみてください。

エックスサーバーVPSにSSH接続する方法と設定を紹介します。

2022.11.27

エックスサーバーVPSにSSH接続したい・・・どうやるんだろう？ 今回はそんな悩みを解決するために、エックスサーバーVPSでSSH接続する方法を書いていきます。立てたサーバーにSSH接続したかったら参考にしていただけると幸いです。 記事の内容 エックスサーバーVPSでのSSH Keyの登録方法 プラ...

Ubuntuの初期設定を行う

$ apt update
$ apt upgrade

ユーザーがrootしかいないので、作業用のユーザーを作成します。

// /home/tanakaが作成される
$ adduser tanaka

// 作成したユーザーにsudo権限を付与する
$ gpasswd -a kobayashi sudo

// 公開鍵を作成したユーザーの.sshディレクトリに配置する
$ mkdir /home/tanaka/.ssh
$ cp /root/.ssh/authorized_keys /home/tanaka/.ssh/.

// パーミッション変更
$ chmod 700 /home/tanaka/.ssh
$ chmod 600 /home/tanaka/.ssh/authorized_keys

// ディレクトリの所有者とグループを設定する
$ chown tanaka:tanaka .ssh
$ chown tanaka:tanaka .ssh/authorized_keys

これでSSH接続を解除して、今度は作成したユーザーでSSH接続します。

$ ssh -i xserver-vps-ssh-key.pem 作成したユーザー@IPアドレス

これで作成したユーザーでSSH接続することができました。

Node.jsをインストールする

Node.jsをインストールします。nodenvを使ってやりますが、好きなもの使ってインストールしてください。

$ git clone https://github.com/nodenv/nodenv.git ~/.nodenv
$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bashrc
$ eval "$(nodenv init -)"
$ source ~/.bashrc

// node-buildのインストール
$ git clone https://github.com/nodenv/node-build.git $(nodenv root)/plugins/node-build 

// この記事を書いている段階での安定版をインストール
$ nodenv install 18.16.0
$ nodenv global 18.16.0

Nuxtアプリケーションを作成する

npmをインストールしてnpx create-nuxt-appでNuxtアプリケーションを作っていきます。

$ sudo apt install npm
$ npx create-nuxt-app sample

これでsampleっていう名称でアプリケーションが作成されました。

この作成したアプリケーションをとりあえずブラウザで表示させたいので、少し設定を編集します。nuxt.config.jsを開いてserverのhostにIPアドレスを入力します。

  build: {
  },
  // xserverのIPアドレスを入力
  server: {
    host: '162.xx.xx.xx'
  }

これでbuildしてstartしてブラウザからIPアドレス:3000でアクセスしてみる。

$ npm install
$ npm run build
$ npm start

表示されましたね。本当はWebサーバー通してNuxtjsの画面表示させたいので、nuxt.config.jsの設定をいじることはしませんが、あくまで確認のために編集して表示させてみました。

確認が済んだらnuxt.config.jsは元の記述に戻しておきましょう。

Nginxをインストールする

Nginxをインストールして、NginxからNuxtのサーバーへ向き先を設定したいと思います。

// nginxインストール
$ sudo apt install -y nginx

// nginx起動
$ sudo systemctl start nginx

// status確認
$ sudo systemctl status nginx

これでIPアドレスをブラウザに入力するとnginxの初期画面が表示されました。

設定ファイルを記述する

Nuxtと繋げるようにNginxの設定ファイルを記載します。

$ sudo vim /etc/nginx/conf.d/nuxt_app_nginx.conf

server {
         listen  80;
         server_name IPアドレス;
         location / {
           proxy_pass http://localhost:3000;
         }
}

最低限の記述しかしていないけど、これでNuxtと繋げるはず。設定ファイルを記載したらnginxは再起動しておこう。

$ sudo systemctl restart nginx

Nuxtアプリを起動して確認する

nuxtアプリを起動してIPアドレスから確認してみましょう。

$ npm run build
$ npm start

これでXserverVPSのIPアドレスを確認すると無事表示できました。

まとめ

XserverVPSでNuxtアプリケーションを作成して公開するっていうことをやってみたけどできましたね。IPアドレスじゃなくてドメインを設定するにはちょっと面倒だけど、NginxとNuxtでアプリケーションを公開するっていうことができました。

もし同じようなことをしてみたかったらXserver VPSで試してみるといいでしょう。