업로드를 위해 S3 호환 객체 저장소 제공자 구성하기

자바스크립트 콘솔을 확인해 보세요. 제 추측으로는 CDN 설정이 잘못되었거나, precompile assets 부분을 제대로 처리하지 못한 것 같습니다.

https://community.itechguides.com/ 은 이제 정상적으로 작동합니다:

여러분에게도 작동하지 않는다면 강제 새로고침을 하거나, 시크릿 창을 시도해 보세요.

2개의 좋아요

사이트가 열렸던 이유는, 사이트를 열었을 시점에 app.yml 파일에서 다음 줄들을 주석 처리해 두었기 때문입니다:

DISCOURSE_USE_S3: true
DISCOURSE_S3_REGION: nyc3
DISCOURSE_S3_ENDPOINT: https://nyc3.digitaloceanspaces.com
DISCOURSE_S3_ACCESS_KEY_ID: accesskey
DISCOURSE_S3_SECRET_ACCESS_KEY: secretkey
DISCOURSE_S3_CDN_URL: https://community-cdn.itechguides.com
DISCOURSE_S3_BUCKET: itg-community-files
DISCOURSE_S3_BACKUP_BUCKET: itg-community-files/backups
DISCOURSE_BACKUP_LOCATION: s3

방금 해당 줄들을 다시 활성화하고 컨테이너를 다시 빌드했습니다. 그런데 이제 사이트가 다시 빈 페이지로 표시됩니다!

아래 스크린샷은 app.yml 파일에 코드를 배치한 위치를 보여줍니다. 보시다시피, S3 설정 코드를 DISCOURSE_NOTIFICATION_EMAIL 아래에 배치했습니다.


a

1개의 좋아요

DISCOURSE_CDN_URL을 주석 처리하면 어떻게 되나요?

1개의 좋아요

그렇게 한 적 없습니다. 하지만 문제를 해결하기 위해 노력해 왔고, S3 CDN을 올바르게 설정하지 않았다고 확신합니다. 저는 StackPath를 사용하고 있으며, Origin 주소와 Host 헤더에 무엇을 입력해야 하는지 확실하지 않습니다.

1개의 좋아요

또한 DigitalOcean의 Space 버킷에서 파일 목록 기능을 어떻게 설정해야 하는지 확실하지 않습니다. 현재 저는 '목록 제한(Restrict Listing)'을 사용 중인데, 이로 인해 어떤 영향이 있을까요?

1개의 좋아요

DISCOURSE_S3_CDN_URL 주석을 처리했는데, 이제 사이트가 로드됩니다. 이는 제 S3 CDN 설정이 문제라는 것을 확인시켜 주지만, 여전히 올바르게 설정하는 방법을 모르겠습니다.

도움을 주시면 정말 감사하겠습니다.

1개의 좋아요

구성(Configuration) 섹션의 모든 작업을 완료하셨나요?

기억이 맞다면, app.yml에서 DISCOURSE_S3_CDN_URL을 설정하려면 필수적으로 자산을 S3에 저장해야 합니다.

2개의 좋아요

디스코어가 어떻게 작동하는지 잘 모릅니다. 그냥 PHP 세계에서 복사&붙여넣기만 하는 또 다른 웹마스터일 뿐인데, 왜 같은 CDN을 두 번 선언해야 하는지 여전히 궁금합니다.

저는 DISCOURSE_S3_CDN_URL을 사용 중이라 DISCOURSE_CDN_URL은 사용하지 않습니다(읽은 문서 어디에도 이걸 쓰라고 안내한 내용은 없었던 것 같고요). 그래서 한번 시도해 보았습니다.

DISCOURSE_CDN_URL: <cdn-url>
을 추가했는데, 재빌드 시 에러는 없었지만 502 에러가 발생했습니다. 이 설정을 제거하니 다시 포럼이 정상 작동했습니다.

여러분의 문제는 다른 곳의 잘못된 설정 때문에 발생할 수도 있습니다. 하지만 저는 쉬운 해결책을 좋아합니다. 틀리더라도 말입니다. 그리고 서로 다른 용도로 CDN을 두 번 지정해야 하는 상황은 좀 불만입니다. 뭐 그런 거죠.

2개의 좋아요

DISCOURSE_CDN_URL과 DISCOURSE_S3_CDN_URL은 서로 다릅니다. DISCOURSE_CDN_URL은 포럼을 가리키는 반면, DISCOURSE_S3_CDN_URL은 S3 저장소 URL을 가리킵니다.

DISCOURSE_CDN_URL은 CSS와 같이 가져올 수 있는(pullable) 자산을 제공하고, DISCOURSE_S3_CDN_URL은 JS, 이미지, 사용자 업로드와 같이 밀어 넣을 수 있는(pushable) 자산을 제공하는 것이 의도된 방식입니다.

모든 설정이 정상적으로 작동하지만 S3 저장소 CDN만 작동하지 않습니다. app.yml 파일에서 해당 설정을 활성화하면 포럼이 하얗게 표시됩니다.

브라우저의 개발자 도구(인스펙트) 네트워크 탭를 확인해 보면, DISCOURSE_S3_CDN_URL을 통해 전달되는 자산에서 404 오류가 발생하고 있습니다.

지금 이 지점에서 막혀 있습니다. S3 CDN이 자산을 전달하지 못하는 이유가 무엇인지 알 수 없습니다.

4개의 좋아요

인내심을 갖고 설명해 주셔서 감사합니다!

저에게는 꽤… 낯선 개념이네요. 하지만 말씀드린 것처럼 제 경험은 매우 제한적입니다. 저는 WordPress에서 S3/CloudFlare를 통해 AWS를 CDN으로 사용하고 있지만, 정적 파일에만 적용됩니다. 스크립트는 별도의 설정이 필요할 것 같네요. WP와 Discourse는 근본적으로 완전히 다른 플랫폼이므로 비교하는 것은 무의미하다고 생각합니다. 다만 이 개념의 원리를 이해하려고 노력하고 있습니다.

자, 이제 당신보다 훨씬 많이 알게 됐네요 :smile:

수정: 아, 그리고 제 설정에 대해 완전히 틀린 말을 했네요 :flushed: 모든 JS, 이미지 등이 CDN을 통해 제공되고 있었습니다. 하지만 거기서 CSS를 찾을 수 없었네요.

1개의 좋아요

네, 맞습니다. 하지만 업데이트해 주셔서 감사합니다.

1개의 좋아요

안녕하세요 @Jagster, 도움을 주시면 정말 감사하겠습니다.

현재 제가 겪고 있는 문제는 제 사이트가 Object Storage CDN에서 .gz.js 에셋을 로드하려고 하지만 해당 파일이 존재하지 않는다는 것입니다. Discourse에 .gz.js 에셋을 Object Storage에 업로드하도록 강제하는 방법은 무엇인가요?

1개의 좋아요

가이드의 이 부분이 바로 그 역할을 합니다:

1개의 좋아요

이미 app.yml 파일에 해당 줄이 있습니다. 위에서 언급한 코드를 플러그인 정의 이후에 배치했습니다. 아니면 플러그인 목록 위에 배치해야 하나요?

1개의 좋아요

틀렸습니다. after_assets_precompile YAML 키는 hooks 키 아래에 있어야 합니다.

기본적으로 우리는 다음과 같이 제공합니다:

## Plugins go here
## see https://meta.discourse.org/t/19157 for details
hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/docker_manager.git

그리고 여러분은 이렇게 원합니다:

## Plugins go here
## see https://meta.discourse.org/t/19157 for details
hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/docker_manager.git
  after_assets_precompile:
    - exec:
        cd: $home
        cmd:
          - sudo -E -u discourse bundle exec rake s3:upload_assets
1개의 좋아요

정말 감사합니다, @Falco. 지금 바로 옮기고 다시 시도해 보겠습니다.

2개의 좋아요

그렇다면 다른 플러그인들은 어떻게 해야 할까요? 아래에 나열해도 괜찮을까요?

  • sudo -E -u discourse bundle exec rake s3:upload_assets ?
1개의 좋아요

아니요.

다음과 같이 변경됩니다:

## Plugins go here
## see https://meta.discourse.org/t/19157 for details
hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/docker_manager.git
          - git clone https://github.com/discourse/docker_manager.git
          - git clone https://github.com/discourse/docker_manager.git
          - git clone https://github.com/discourse/docker_manager.git
          - git clone https://github.com/discourse/docker_manager.git
  after_assets_precompile:
    - exec:
        cd: $home
        cmd:
          - sudo -E -u discourse bundle exec rake s3:upload_assets

YAML은 트리 형태의 데이터 구조이며, 공백 들여쓰기가 구조를 정의합니다.

3개의 좋아요

(@Falco)님과 @pfaffman님이 제공해 주신 가이드라인 덕분에 방금 이 구성을 성공적으로 완료했습니다.

제 구성을 보고 싶으신 다른 커뮤니티 멤버들을 위해 스크린샷을 공유합니다. 이 모든 것을 구성하는 동안 포괄적인 가이드도 작성해 두었습니다.

저는 StackPath와 DigitalOcean Spaces를 사용했습니다. 제 가이드에는 전체 구성 과정의 단계별 설명이 포함되어 있습니다. 이 가이드가 필요하신 분이 계시면 요청 시 URL을 공유해 드리겠습니다.

2개의 좋아요

@Falco님과 @pfaffman님, 도움을 주셔서 정말 감사합니다. 저는 처음 Discourse를 설정하는 건데, 가장 어려운 부분들은 이제 끝낸 것 같습니다! 정말 감사드립니다!

3개의 좋아요