ChangKeun Ji

&nbsp;현재 하나의 인스턴스에 프론트와 백엔드 두 개를 실행시키는 작업을 시도 중인데 잘 안되고 있어
정말 죄송하게도 다시 질문드리겠습니다.
&nbsp;
현재 저의 인스턴스 보안 그룹 설정은 아래와 같습니다.
<img src="https://cdn.inflearn.com/public/comments/01a24d7a-311e-47ef-8f9d-842d5a4a2737/스크린샷 2021-11-04 오전 3.53.30.png" />
&nbsp;
사용자 지정 TCP를 통해서 PORT 번호를 3065로 지정해주었고, 프론트의 로그인 코드는 아래와 같습니다.
<pre class="language-javascript"><code> const onClickKakao = useCallback(() => {
 Router.replace(`http://3.36.254.124:3065/login/kakao`);
 }, []);</code></pre>
&nbsp;
백엔드 app.js 의 코드는 아래와 같습니다.
<pre class="language-javascript"><code>app.set("trust proxy", 1);
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(
 session({
 secret: process.env.COOKIE_SECRET,
 resave: false,
 saveUninitialized: false,
 proxy: process.env.NODE_ENV === "production",
 cookie: {
 maxAge: 315360000000, // 10년 : 1000 * 60 * 60 * 24 * 365 * 10
 httpOnly: true,
 secure: process.env.NODE_ENV === "production",
 domain: process.env.NODE_ENV === "production" && frontUrl,
 },
 store: new SequelizeStore({
 db: db.sequelize,
 }),
 })
);

app.use(passport.initialize());
app.use(passport.session());

app.use("/post", postRouter);
app.use("/login", loginRouter);
app.use("/directory", directoryRouter);

app.listen(3065, () => {
 console.log("실행 중");
 });
</code></pre>
&nbsp;
콜백 코드는 아래와 같습니다.
<pre class="language-javascript"><code>router.get("/kakao", passport.authenticate("kakao"));

router.get(
 "/kakao/callback",
 passport.authenticate("kakao", {
 failureRedirect: "/login",
 }),
 (req, res) => {
 res.redirect("http://3.36.254.124"); // 홈 화면으로 이동
 }
);</code></pre>
&nbsp;
첫번째 문제는 클릭을 하면 예상한 주소 http://3.36.254.124:3065/login/kakao 가 아닌
:3065 앞에 /가 붙어서 http://3.36.254.124/:3065/login/kakao 으로 이동하여 404page가 뜹니다.
&nbsp;
두번째 문제는 제가 직접 url을 http://3.36.254.124:3065/login/kakao 로 고쳐주고 로그인을 하면
백엔드에서 로그인 프로세스가 일어나지만&nbsp; 쿠키를 받거나 하지는 못하고 있습니다.
&nbsp;
혹시 무엇이 잘못되었는지 선생님의 생각을 듣고 싶습니다. 
소셜 로그인을 도저히 포기하지는 못할것 같고 JWT를 사용하면 문제가 해결될까도 궁금합니다.
바쁘실텐데 정말 감사드립니다.
&nbsp;

카카오 로그인 적용 관련해서 질문 드릴게요

그렇다면 프론트와 백엔드 두 개의 인스턴스를 만들지 않고 하나의 인스턴스에 집어넣으면 해결될까요?
작은 프로젝트라 그렇게 해도 상관 없을것 같아서요

<pre class="language-javascript"><code>export const getServerSideProps = wrapper.getServerSideProps(
 (store) => async () => {
 store.dispatch({
 type: LOAD_MY_INFO_REQUEST,
 });

 store.dispatch({
 type: LOAD_POSTS_REQUEST,
 });

 // REQUEST 가 saga 에서 SUCCESS 될 때까지 기다려준다
 store.dispatch(END);
 await store.sagaTask.toPromise();
 }
);</code></pre>

Cannot read property 'dispatch' of undefined

publicPath 지우시면 됩니다. publicPath 속성은 이제 사용되지 않는것으로 보입니다.

ChangKeun Ji

Posts