Nuxt.jsプロジェクトへStorybook導入手順

2805 ワード
AmazonLinux2 Vue.js nuxt.js storybook AWS AWS テキストリンク

この記事について

AmazonLinux2で稼働しているNuxt.jsプロジェクトにStorybookを導入し、ブラウザから画面を表示するまでの手順です。
AmazonLinux2へNuxt.jsプロジェクトを導入する手順は以下のURLを参照してください。
https://qiita.com/deehii/items/58e6da680f322fce10ff

Nuxt.jsプロジェクトにStorybookをインストールします

$ pwd
/home/ec2-user/my-project
$ npx -p @storybook/cli sb init

nginxにStorybookが稼働するローカルサーバーを追加します

$ sudo vi /etc/nginx/conf.d/storybook.conf

+server {
+   listen       80;
+   server_name  storybook;
+
+   location /storybook {
+       proxy_pass http://localhost:6006;
+       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;
+   }

+   error_page 404 /404.html;
+       location = /40x.html {
+   }

+   error_page 500 502 503 504 /50x.html;
+       location = /50x.html {
+   }
+}

nginxを再起動します

$ sudo systemctl restart nginx

Storybookを起動します

$ pwd
/home/ec2-user/my-project
$ npm run storybook

ブラウザからアクセス

ブラウザからEC2のパブリックIP(ポート6006)にアクセスします

Storybookのページが表示されました。

以上