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

박해진님의 프로필 이미지
박해진

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

S3 연결하기

도메인 대신 탄력적 ip연결 후, 프론트 ip가 연결이 안되는 문제

작성

·

326

·

수정됨

0

상황)도메인 연결하면 돈이 나간대서 탄력적 ip만 연결헤줘도 원래 로그인까지 화면은 잘 나왔었는데요, s3연결하기부터 따라하기 전에 강의를 보았는데 prepare에 레파지토리 한개만 연결하길래, 기존에 front, back 경로에 레파지토리를 각각 만들어서 커밋중이여가지고 기존 레파지토리를 다 지우고 초기화한 다음 새 레파지토리와 새 인스턴스를 연결해서 s3까지 따라했거든요. 그런데 그 뒤로 back ip는 화면에 hello express라고 잘 나오는데 front탄력적 ip를 입력하니까 화면이 연결이 안되는 상황입니다. (DB 테이블 대소문자 잘 되어있습니다, env는 ubuntu에도 비밀 엑세스키까지 4가지 똑같이 입력해놓았습니다, S3에 나오는 내용까지 설치는 완료한 상태입니다. img관련 코드에서 backUrl 지워주었습니다. ubuntu에서도 git pull, npm i , npm run build해주었습니다.)

스크린샷 2024-01-20 오전 12.34.10.png스크린샷 2024-01-20 오전 12.56.04.png스크린샷 2024-01-20 오전 12.35.37.png스크린샷 2024-01-20 오전 12.37.31.png스크린샷 2024-01-20 오전 12.35.10.png스크린샷 2024-01-20 오전 12.34.55.png

 

질문)프론트 ip가 화면에 안나오는데 log와 콘솔에 아무것도 안떠서, 이럴 때 화면이 안나오는 원인과 해결방법이 어떻게 되는지 궁금합니다.

 

질문)보안자격증명의 액세스키에 선생님거는 리전, 서비스가 나와있는데 제거는 코드에 작성한 내용과 연결이 안되서 N/A라고 나오는게 맞나요?

스크린샷 2024-01-20 오전 12.19.02.png

시도해본 것)back에서 배포용일 때 if문에 도메인 주소를 빼고 실행해보기도 하고, 도메인 주소 대신 origin front 탄력적 ip를 넣어서 실행도 해보았지만 연결이 되지 않았습니다.

if(process.env.NODE_ENV === 'production'){
    app.use(morgan('combined'));
    app.use(hpp());
    app.use(helmet());
    // app.use(cors({
    //     origin: 'http://nodebird.com',
    //     credentials: true,
    // }));
} else {
    app.use(morgan('dev'));
}


작성한 코드 일부)
app.js

const express = require('express');
const cors = require('cors');
const session = require('express-session');
const cookieParser = require('cookie-parser');
const passport = require('passport');
const dotenv = require('dotenv');
const morgan = require('morgan');
const postRouter = require('./routes/post');
const postsRouter = require('./routes/posts');
const userRouter = require('./routes/user');
const hashtagRouter = require('./routes/hashtag');
const db = require('./models');
const passportConfig = require('./passport');
const path = require('path');
const hpp = require('hpp');
const helmet = require('helmet');
dotenv.config();
const app = express();
db.sequelize.sync()
    .then(() => {
        console.log('DB 연결 성공');
    }).catch(console.error);
passportConfig();
if(process.env.NODE_ENV === 'production'){
    app.use(morgan('combined'));
    app.use(hpp());
    app.use(helmet());
    // app.use(cors({
    //     origin: 'http://nodebird.com',
    //     credentials: true,
    // }));
} else {
    app.use(morgan('dev'));
}
app.use(cors({
    origin: ['http://localhost:3060', 'http://nodebird.com', 'http://13.125.122.77'],
    credentials:true
}));
app.use('/', express.static(path.join(__dirname, 'uploads')));
app.use(express.json());
app.use(express.urlencoded({extended:true}));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
    saveUninitialized: false,
    resave: false,
    secret: process.env.COOKIE_SECRET,
    // cookie: {
    //     httpOnly: true, //자바스크립트로 접근하지못하게
    //     secure: false, //일단 false로 하고 https적용할 땐 ture
    //     domain: process.env.NODE_ENV = 'production' && '.nodebirdcom' //도메인 사용할 경우 
    // },
}));
app.use(passport.initialize());
app.use(passport.session());
app.get('/', (req, res) =>{
    res.send('hello express');
});

app.use('/posts', postsRouter);
app.use('/post', postRouter);
app.use('/user', userRouter);
app.use('/hashtag', hashtagRouter);

app.listen(80, () => {
    console.log('서버 실행 중');
});


routes/post.js

const express = require('express');
const {Post, Image, Comment, User, Hashtag} = require('../models');
const {isLoggedIn} = require('./middlewares');
const router = express.Router();
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const multerS3 = require('multer-s3');
const AWS = require('aws-sdk');
try {
    fs.accessSync('uploads');
} catch(error) {
    console.error('uploads폴더가 없으므로 생성합니다.');
    fs.mkdirSync('uploads'); 
}
AWS.config.update({
    accessKeyId: process.env.S3_ACCESS_KEY_ID,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    region: 'ap-northeast-2',
});
const upload = multer({
    storage: multerS3({
        s3: new AWS.S3(),
        bucket: 'react-saga-nodebird-s3',
        key(req, file, cb){
            cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`)
        }
    }),
    limits: {fileSize: 20 * 1024 * 1024} //20MB
});
router.post('/images', isLoggedIn, upload.array('image'),(req, res, next) => { //POST /post/images
    res.json(req.files.map((v) => v.location));
});


backUrl남아있는 부분
config.js

export const backUrl = 'http://13.209.144.99';

profile.js

import { backUrl } from '../config/config';

const Profile = () => {
    const { data: followersData, error:followerError } = useSWR(`${backUrl}/user/followers?limit=${followersLimit}`,  fetcher);
    const { data: followingsData, error:followingError } = useSWR(`${backUrl}/user/followings?limit=${followingsLimit}`,  fetcher);

export default Profile;

sagas/index

import { backUrl } from '../config/config';

axios.defaults.baseURL = backUrl;


back/package.json

{
  "name": "react-nodebird-back",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=production pm2 start app.js"
  },
  "author": "luckyhaejin",
  "license": "ISC",
  "dependencies": {
    "aws-sdk": "^2.1538.0",
    "bcrypt": "^5.1.1",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "express-session": "^1.17.3",
    "helmet": "^7.1.0",
    "hpp": "^0.2.3",
    "morgan": "^1.10.0",
    "multer": "^1.4.5-lts.1",
    "multer-s3": "^3.0.1",
    "mysql2": "^3.6.5",
    "passport": "^0.7.0",
    "passport-local": "^1.0.0",
    "pm2": "^5.3.0",
    "sequelize": "^6.35.2",
    "sequelize-cli": "^6.6.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}

 

front/package.json

{
  "name": "react-nodebird-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npx browserslist@latest --update-db && NODE_OPTIONS=--openssl-legacy-provider next -p 3060",
    "build": "cross-env ANALYZE=true NODE_ENV=production next build",
    "start": "cross-env NODE_ENV=production next start -p 80",
    "lint": "eslint ."
  },
  "author": "luckyhaejin",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
    "@next/bundle-analyzer": "^14.0.4",
    "antd": "^4.2.1",
    "axios": "^1.6.2",
    "babel-plugin-styled-components": "^2.1.4",
    "cross-env": "^7.0.3",
    "eslint-config-airbnb": "^19.0.4",
    "immer": "^10.0.3",
    "moment": "^2.30.1",
    "next": "^9.5.5",
    "next-redux-wrapper": "^6.0.2",
    "pm2": "^5.3.0",
    "prop-types": "^15.8.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-redux": "^7.2.9",
    "react-slick": "^0.29.0",
    "redux": "^4.2.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-saga": "^1.3.0",
    "saga": "^4.0.0-alpha",
    "shortid": "^2.2.16",
    "styled-components": "^6.1.1",
    "swr": "^2.2.4"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^8.56.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "faker": "^5.5.3"
  }
}


사용중인OS) macOS

reactreduxnode.jsexpressnext.js

답변 2

1

박해진님의 프로필 이미지
박해진
질문자

오오옷 강사님!! 드디어 에러 해결됐습니당..!
첨에는 package.json에 설치가 다 되어있는데, nodemodule, next 관련 에러가 계속 나서 계속 관련 캐시같은거 다 지워가며 재설치하다가 그냥 호스트 지우고 다시 첨부터 설치해봤는데
npm run build 하구 ubuntu로 .next에 쓰기 권한이 없어 생기는 문제들이 있어서 권한 추가해준 뒤 다시 npm run build 했더니 해결 되었습니당..! 감사합니당

관련 명령어 정리해서 올려보아욧
ls -l /home/ubuntu/react_nodebird/front/.next

 

sudo chmod -R 755 /home/ubuntu/react_nodebird/front/.next

 

sudo chown -R ubuntu:ubuntu /home/ubuntu/react_nodebird/front/.next

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

프론트쪽에서 pm2 list 했을 때 어떻게 뜨나요?

박해진님의 프로필 이미지
박해진
질문자

스크린샷 2024-01-20 오전 11.04.24.png

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

지금 계속 재시작이 되는걸로 봐선 에러가 있습니다.

sudo npx pm2 logs --err --lines 200

해서 에러 확인하세요.

박해진님의 프로필 이미지
박해진

작성한 질문수

전체 Q&A
질문하기