📝 오늘 한 것

1. multer S3 - 폴더 만들기 / process.env.NODE_ENV

2. github access_token 관련 CROS 에러 (미해결)

📚 배운 것

1. 배포

1) multer S3

(1) 버킷에 폴더 생성

multerUploader를 s3AvatarUploader와 s3VideoUploader로 나눴다.

// middlewares.js
const s3AvatarUploader = multerS3({
  s3: s3,
  bucket: "syong/avatars", // 폴더 생성
  acl: "public-read",
});

const s3VideoUploader = multerS3({
  s3: s3,
  bucket: "syong/videos", // 폴더 생성
  acl: "public-read",
});

export const uploadAvatar = multer({
  dest: "uploads/avatars/",
  limit: {
    fileSize: 5000000,
  },
  storage: s3AvatarUploader,
});

export const uploadVideo = multer({
  dest: "uploads/vidoes/",
  limit: {
    fileSize: 10000000,
  },
  storage: s3VideoUploader,
});

(2) process.env.NODE_ENV

heroku에서 작업할 때만 파일 업로드 시 multer S3를 사용하고, 내 컴퓨터에서 작업(테스트)할 땐 로컬에 저장되도록 하려고 한다.

process.env.NODE_ENV는 production이라는 값을 가지는, heroku에 정의되어 있는 변수이다.
즉, heroku에서 작업 중일 때(이 변수가 값을 가질 때)만 multer S3를 사용하도록 한다.
localhost에서 작업 중일 때(이 변수가 값을 가지지 않을 때)는 특별한 storage를 사용하지 않고 로컬에 만들어둔 uploads 폴더에 파일을 저장한다.

// middlewares.js
const isHeroku = process.env.NODE_ENV === "production";

const s3AvatarUploader = multerS3({
  s3: s3,
  bucket: "syong/avatars",
  acl: "public-read",
});

const s3VideoUploader = multerS3({
  s3: s3,
  bucket: "syong/videos",
  acl: "public-read",
});

export const uploadAvatar = multer({
  dest: "uploads/avatars/",
  limit: {
    fileSize: 5000000,
  },
  storage: isHeroku ? s3AvatarUploader : undefined,
});

export const uploadVideo = multer({
  dest: "uploads/vidoes/",
  limit: {
    fileSize: 10000000,
  },
  storage: isHeroku ? s3VideoUploader : undefined,
});

그런데 이렇게 하면 로컬에서 작업할 때 avatarUrl 값인 file.location이 null이 되기 때문에 상황에 따라 file.path가 될 수 있도록 코드를 수정했다.

// userController.js
export const postEdit = async (req, res) => {
  // 중략
  const isHeroku = process.env.NODE_ENV === "production"; // 추가 ❗
  const updatedUser = await User.findByIdAndUpdate(
    _id,
    {
      avatarUrl: file ? (isHeroku ? file.location : file.path) : avatarUrl, // 수정 ❗
      name,
      email,
      username,
      location,
    },
    { new: true }
  );
  // 중략
};

// videoController.js
export const postUpload = async (req, res) => {
  // 중략
  const isHeroku = process.env.NODE_ENV === "production"; // 추가 ❗
  try {
    const newVideo = await Video.create({
      fileUrl: isHeroku ? video[0].location : video[0].path, // 수정 ❗
      thumbUrl: isHeroku ? thumb[0].location : thumb[0].path, // 수정 ❗
      title,
      description,
      hashtags: Video.formatHashtags(hashtags),
      owner: _id,
    });
	// 중략
  } catch (error) {
    // 중략
    });
  }
  return res.redirect("/");
};

로컬인지 Heroku인지를 알기 위해 isHeroku 변수를 템플릿에서 사용할 수 있도록 localsMiddleware에 지정했다.
파일이 로컬에 저장될 때는 파일이 상대 경로가 되지 않도록 img의 src 속성에 "/"를 추가해야 한다.
실제로 써주지는 않았다.

// middlewares.js
const isHeroku = process.env.NODE_ENV === "production";

export const localsMiddleware = (req, res, next) => {
  res.locals.siteName = "Wetube";
  res.locals.loggedIn = Boolean(req.session.loggedIn);
  res.locals.loggedInUser = req.session.loggedInUser || {};
  res.locals.isHeroku = isHeroku; // 추가 ❗
  next();
};

2) 🙋‍♀️ github avatar 가져오기

🔥🔥 질문 🔥🔥

문제는 github로 로그인 했을 때 github avatar 즉, 프로필 사진이 안 보인다는 것이다.
3일간 CORS만 검색하고 공부했지만 결과적으로 에러는 해결하지 못했다.

일단 지금까지 알게 된 걸 순서대로 정리하자면

1. 나는 github에서 access_token을 받아와서 userData에 접근해 프로필 사진을 가져오고 싶다.

2. 브라우저는 보안 상의 이유로 same origin policy(SOP)를 택하고 있어 기본적으로 동일 출처가 아니라면 리소스를 공유할 수 없다. 다른 출처에서 리소스를 공유하려면 CORS(교차 출처 리소스 공유) 정책을 취해야 한다.

3. CORS의 동작 방식으로는 simple request, preflight request, credentials request 세 가지가 있다. 나의 경우 preflight request이면서 credentials request였다.

4. 처음 뜬 에러는 다음과 같았다.
   일반 로그인이든 github 로그인이든 모든 로그인에서 프로필 사진이 보이지 않고 에러가 떴다.

ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

5. require-corp를 credentialless로 바꾼 후 img 태그에서 crossorigin 속성을 crossorigin="use-credentials"으로 수정했다.
   (SharedArrayBuffer 때문에 COEP / COOP를 지울 수는 없다.)

// server.js
app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "credentialless");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});

//- header.pug & profile.pug
img(src=loggedInUser.avatarUrl, crossorigin="use-credentials").profile-img

6. 일반 로그인을 했을 때는 프로필 사진이 잘 보였다.
   그러나 여전히 github로 로그인을 하면 사진 아이콘만 뜨고 사진이 안 보이면서 콘솔에는 다음과 같은 에러가 떴다.

~ ~ ~ has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
GET https: //avatars.githubusercontent.com/u/~ ~ ~ net::ERR_FAILED 200

7. 에러 메시지 그대로 Access-Control-Allow-Origin를 *가 아니라 구체적으로 명시할 필요가 있었다.
   찾아보니 Heroku의 Settings 메뉴에서 따로 CORS를 구성할 수가 있었다.
   안내 문서를 참고해 다음과 같이 작성했다.

   솔직히 여기까지 찾는 데만 해도 정말 오래 걸렸다. credentials request는 Access-Control-Allow-Credentials를 true로 설정해야 하고, Access-Control-Allow-Origin'을 *로 설정하면 안되고 구체적으로 지정해야 한대서 express cors middleware도 설치해서 origin과 credentials true 옵션도 넣어보고, server.js 파일에서 res.header로 설정해보고 근데 또 true는 문자열로 써야 하는지 boolean 값으로 써야 하는지 찾아보는 곳마다 말이 틀리고 사소한 거 하나하나까지 이해가 안되고 헷갈렸다.

   이렇게 나열하니까 참 별 거 없어 보인다. 누군가는 10분 안에 끝날 시도들이제겠지만 영어 문서 해석하고 이론 이해하고 실제로 내 사례에 맞춰 적용하는데 한세월이었다. 아직도 완벽히 이해 못했는데 하도 반복해서 보다 보니 일부분만 머리에 박힌 상태 같다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "PUT",
            "GET",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://syongtube.herokuapp.com"
        ],
        "ExposeHeaders": []
    }
]

8. 하지만 여전히 해결은 안 됐다.
   정말 의문인 것은 분명 origin을 명시해줬는데 network 탭을 확인하면 응답 헤더의 Access-Control-Allow-Origin이 *라는 것이다.
   일반 로그인 후 프로필 사진을 클릭하면 origin이 지정한 웹 사이트 url로 잘 나오는데 github 로그인만 하면 저렇게 변해 있다.
   그러다 이 문서를 발견했다.

cors issue on github oauth

While all the actual GitHub API endpoints support CORS by sending the right response headers, it is a known issue that the https: //github.com/login/oauth/access_token endpoint for creating an OAuth access token does not support CORS requests from Web applications.

The very specific workaround for this case is to use https: //github.com/prose/gatekeeper:

Gatekeeper: Enables client-side applications to dance OAuth with GitHub.

Because of some security-related limitations, Github prevents you from implementing the OAuth Web Application Flow on a client-side only application.

This is a real bummer. So we built Gatekeeper, which is the missing piece you need in order to make it work.

9. ???? 내가 맞게 이해한 건가. 당장 관련 문제를 검색해봤는데 생각보다 글이 안 나왔다. 내가 검색을 못하는 건지 영어로 검색해도 글이 별로 없었다. 아무래도 내가 잘못 이해한 건지 이 정보가 틀린 건지.

   어쨌든 해결은 해야 했기에 일단 안내에 따라 gatekeeper를 heroku에 배포했다.
   근데 사용법이 하필 jquery로 나와 있었다. jquery를 1도 몰라서 $.getJSON()을 바닐라 JS로 어떻게 바꾸는지 검색해봤다.
   내가 이해한 바로는 const json = await (await fetch()).json() 하고 받은 json 값을 이용해 코드를 써나가는 건데 이것부터 맞게 이해한 건지 전혀 확실하지 않고 어쨌든 코드를 수정했다.

   기존에 내가 작성했던, github에서 access_token을 받아오는 코드를 다음과 같이 고쳤다.
   .env 파일과 heroku에서 변수도 수정해줬다.

// userController.js
export const startGithubLogin = (req, res) => {
  const baseUrl = "https://github.com/login/oauth/authorize";
  const config = {
    client_id: process.env.OAUTH_CLIENT_ID,
    allow_signup: false,
    scope: "read:user user:email",
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  return res.redirect(finalUrl);
};

export const finishGithubLogin = async (req, res) => {
  // 여기서부터
  const code = window.location.href.match(/\?code=(.*)/)[1];
  const tokenRequest = await (
    await fetch("http://localhost:9999/authenticate/" + code, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();
  // 여기까지 수정
  // 원래는 fetch 함수로 https://github.com/login/oauth/access_token에 post 요청을 보내서 tokenRequest를 받아오는 코드였다.
  if ("token" in tokenRequest) {
    const { token } = tokenRequest;
    const apiUrl = "https://api.github.com";
    const userData = await (
      await fetch(`${apiUrl}/user`, {
        headers: {
          Authorization: `token ${token}`,
        },
      })
    ).json();
    const emailObj = emailData.find(
      (email) => email.primary === true && email.verified === true
    );
    if (!emailObj) {
      req.flash("error", "No valid email.");
      return res.redirect("/login");
    }
    let user = await User.findOne({ email: emailObj.email });
    if (!user) {
      user = await User.create({
        avatarUrl: userData.avatar_url,
        name: userData.name,
        email: emailObj.email,
        username: userData.login,
        password: "", 
        socialOnly: true,
        location: userData.location,
      });
    }
    req.session.loggedIn = true;
    req.session.user = user;
    return res.redirect("/");
  } else {
    req.flash("error", "No access token");
    return res.redirect("/login");
  }
};

10. 콘솔 창을 확인한 결과, 에러가 바뀌었다! 말 그대로 바뀌었다. 해결이 아니라.
    결과적으로는 이제는 로그인이 아예 안 된다.
    finishGithubLogin 컨트롤러를 건드렸으니 로그인이 안될 수밖에...
    에러 내용은 다음과 같고 network 탭을 확인하면 아까는 안 떴던 내용이 떠 있다.
    client ID가 막 노출되어 있는데 뭐가 공개해도 되고 안 되는지 분간이 안돼서 올리지는 못하겠다.
    바꿔 말하면 그래서 gatekeeper는 적용이 된 건지 안된 건지 오류는 어디서 난 것인지 찾지를 못하겠다.

GET https://syongtube.herokuapp.com/users/github/finish?code=435043a20b7f90bb35ad 503 (Service Unavailable)

11. 다시 원래대로 코드를 돌리고 이번엔 프록시 서버를 시도해봤다.
    cors-anywhere, http-proxy-middle 등을 이용해 간편하게 만들 수 있다고 해서 cors-anywhere를 이용해봤다.
    heroku에 배포를 끝낸 후 만들어진 프록시 서버 뒤에 요청 보낼 (access_token 구하는) url을 붙여서 fetch 함수를 사용해 봤지만 역시나 실패했다.

12. 여기까지 진행했다가 503 에러에 대해 다시 검색해봤는데 이런 글을 찾았다.
    내가 코드를 잘못 건들여서 로그인'조차' 안 되는 거라고 생각했는데 그게 아닌 건가. 아니면 내 경우엔 해당이 안 되는 말인 걸까.

What is a 503 Service Unavailable Error (And How Can I Fix It)?

An important thing to remember is that the 503 error is a server-side error. That means the problem exists with the website you’re trying to access, and not with your computer. That’s both good and bad news. It’s good news because there’s nothing wrong with your computer, and it’s bad news because there’s usually nothing you can do to solve the problem from your end.

✨ 내일 할 것

1. 수정 및 복습