Nuxt.js 프로젝트에 Storybook 배포 절차

이 기사에 대하여

AmazonLinux2에서 실행되는 Nuxt.js 프로젝트에 Storybook을 도입하고 브라우저에서 화면을 표시하기까지의 단계입니다.
AmazonLinux2에 Nuxt.js 프로젝트를 배포하는 단계는 다음 URL을 참조하십시오.
htps : // 이 m / 데에히이 / ms / 58에 6이다 680f322f

Nuxt.js 프로젝트에 스토리북 설치

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

nginx에 스토리북이 실행되는 로컬 서버 추가

$ 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)에 액세스합니다.



스토리북 페이지가 표시되었습니다.

이상