nuxt generate 의 head 작동 문제

Nuxt.js 시작하기

작성

463

nuxt에서 동적으로 head()를 할당해주었습니다.

npm run build에서는 잘 동작하지만

npm run generate 한 곳에서는 제대로 head()가 동작하지 않습니다..

페이지마다 동적으로 meta를 할당해주고 싶은데,

generate 로는 안 되는 걸까요?

도대체 문제가 어떤걸까요?

답변 4

지식공유자

안녕하세요 성국님, 빌드 명령어 바꾸실 때 target도 같이 바꿔주셨나요? 동적으로 head를 할당하는 코드가 어떻게 되시나요?

질문자

ssr과 target 모두 default로 해줬으니 아마 'true'와 'sever'로 들어갔을거 같습니다 .ㅅ.

(target을 'static'으로 바꿔서 해주니 아예 generate를 쳤을때 오류가 나네요..)

여하튼 문제는 generate가 _id 폴더나 파일의 html 파일을 생성해주지 못한다고 하네요 ㅠ

예를들어 page/_id/index.vue 라는 디렉토리 구조에 파일이 있고,

generate를 하면 디렉토리에 page에 관련된 html이 안 생깁니다.

물론 프로미스나 콜백으로 해주는게 있던데 흠.. 저는 이게 이해가 안 되던게 모든 id (params) 값을 가져와서 매칭해주더군요..
(이게 무슨 비효율적인 짓인가 싶었습니다.. 그리고 실제 해보니 에러가 나서 잠정 포기헀습니다..)

다시 돌아와 저는 'www.example.com/page/{params}'라는 주소에 접근해야 하는데,

사실상 generate를 한 이후에 page라는 html이 생성되지 않았으니 접근하는게 불가능 하더군요.

하지만 신기하게도 루트폴더에서 nuxt-link를 통해 접근하는건 가능했습니다.

그러니까 이게 보니까 동적 페이지는 js로 할당해주는거 같더라구요 흠.. 마치 spa를 보는거 같더군요 .ㅅ.

이후 generate를 해준 코드를 aws amplify에 업로드하였습니다.
그리고 '/page/{params}' 주소에 다이렉트로 접근하게 되니 초반에는 페이지 없다고 에러뜨다가,

추후 어떻게 접근해서 페이지를 띄워주더라고요.
(amplify의 리다이렉팅 원리는 저도 아직은 모르겠습니다.)

문제는 이렇게 리다이렉팅된 페이지가 head() 설정을 가져오지 못합니다.

head() 설정은 page.vue 안에 head() 메소드 안에 설정해주었고, npm run dev를 했을때 정상적으로 동작을 하는것을 확인했습니다.

하지만 앞서 말했듯 다이렉트로 해당 주소에 접근하게 되면 head() 메소드가 정상적으로 반영이 안되는 현상이 나타납니다..

그냥 다 접고 npm run build 와 start를 통해서 aws 인스턴스에 올려버릴까 하는 생각을 했지만 흠.. 세팅부터 귀찮아서 최대한 업로드가 편한 amplify 로 해보려 하는데 깝깝합니다..

캡틴판교님 도와주시면 감사합니다..! 🙏

질문자

더불어 nuxt generation을 하면 일부 페이지는 디렉토리상에 생성이 안 되는데,

이것도 왜 그런지 궁금합니다..!

바쁘시겠지만 답변주신다면 감사드립니다 :-)

질문자

그냥 ec2에 환경세팅하고 배포 자동화만 하여 돌리게 되었습니다 ..ㅅ..

amplify는 아직은 SSR 지원을 안해주는거 같고 해당 이슈는 아래를 참고하시면 됩니다.

ec2 환경 삽질하다가 5시간이나 흘러버렸네요.. ㅠ

빨리 더 배포 환경이 좋아졌으면 좋겠습니다..!

질문자

그리고 추가로 AWS에 nuxt를 쉽고 빠르게 올릴 수 있는 서비스가 있을까요?
amplify는 살펴보았더니 정적 호스팅이 최적화 되어 있는거 같아서요..

nuxt build와 nuxt start를 하려면 서버가 필요할듯 한데..
흠 이것때문에 ec2 세팅 해주기도 뭐하고 이후에 자동화 배포에도 불편하고..

beanstalk으로 해봤는데 계속 오류 뜨네요.. ㅠ

아시는게 있으시다면 공유해주시면 감사합니다..! 🙏

인프런 커뮤니티 질문&답변