Nuxt/Laravel (Docker)/AWS (EC2)로 만드는 간단한 CRUD 앱

(포트 필리오의 소개가 됩니다.)
제목대로, 프론트는 Nuxt, 백엔드는 Laravel (Docker)로 간단한 CRUD 앱을 제작,
Nuxt는 heroku, Laravel(Docker)은 AWS(EC2)*에 배포했습니다.
Nuxt는 SSR(Universal), API 인증에 sanctum을 사용하고 있습니다.
각각의 구체적인 해설은 다른 기사에 정리해 가고 싶습니다.

* 처음에는 Laravel도 Heroku에 배포했지만 나중에 AWS (EC2)에 리플레이스했습니다.

제작한 애플리케이션
*현재 SSL 인증서가 만료되어 표시되지 않습니다. 대응 중입니다.

기능

밸리데이션: 코멘트를 투고한 유저(본인)만 편집과 삭제를 할 수 있다

좋아요 기능 : 자신이 좋아하는 버튼은 색상이 노란색으로 바뀝니다. 다시 누르면 취소됩니다.

도전

오류 처리

전까지는 움직이고 있었을 것인데, 케어리스 미스로 어느새 움직이지 않게 되고 있다, 라고 하는 상황이 발생.
수정할 수 있었지만 테스트의 중요성을 느꼈다.
각각의 기능을 느슨하게 결합하여 테스트하기 쉽게 하고 싶다.

Nuxt

비동기의 이해를 깊게 유효하게 활용하고 싶다.

감시 프로퍼티를 활용해, 보다 인터랙티브한 처리를 기입하고 싶다.

Dotenv가 갑자기 작동하지 않기 때문에, 현재는 URI의 풀 패스로 기술하고 있습니다.

참고

Docker 배포
- git push로 Docker 환경을 Heroku에 배포
- docker + Laravel 앱을 heroku에 배포
- 【초입문】20분에 Laravel 개발 환경을 폭속 구축하는 Docker 핸즈온

Nuxt
- Nuxt를 사용하여 Promise, async/await 코드 작성
- JavaScript에서 일정 시간 기다린 후 처리를 시작하는 방법
- Vue + Vue Router + Vuex + Laravel로 사진 공유 앱 만들기 (16) 오류 처리 Part.2

라라벨
- Laravel 끈적 거리는 cache를 제거하자!

Auth
- Nuxt.js에서 Auth Module을 사용하여 로그인 기능 구현
- 【Laravel + Vue】 Laravel Sanctum을 사용하여 API 인증을 구축해보십시오
- nuxt.js + auth 사용시의 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 해소법
- 【Nuxt.js】 로그인 전후의 리디렉션 처리를 미들웨어로 구현한다

메모

기본적으로는 심플한 CRUD 어플리케이션이므로, 상기의 참고와 공식을 보면 할 수 있다고 생각한다. 별로 정리할 일이 없다 ..?

CRUD이지만 show 페이지를 만들지 않았다. 그 때문에 for문을 사용해 모든 투고를 표시하고 있다. 삭제나 편집시에는 쿼리를 패스에 푸시 하는 것으로 개별의 투고 데이터를 꺼내고 있다.

AWS는 첫 도전이었기 때문에 먼저 공식 튜토리얼을 보고 Laravel과 WordPress를 배포하는 것으로 시작했다. VPC 등 기본적인 것을 배울 수 있으므로 초보자에게 추천.