묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
nginx 후 Front(502 Bad Gateway), back(welcome to nginx) 라고만 나오는 문제
안녕하세요 선생님 front, back nginx 한 뒤로둘다 https라고 바뀌고 인증서도 있긴한데,Front(502 Bad Gateway)라고 나오고back(welcome to nginx) 라고만 나오는 상태입니다.(설치는 Nginx Ubuntu20보고 했습니다https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal&tab=standard)문제1)그래서 첫번째 문제로 back에서 sudo npx pm2 logs --err --lines 200를 해보았을 땐 아래와 같은 경고가 나왔습니다.0|app | Warning: connect.session() MemoryStore is not 0|app | designed for a production environment, as it will leak 0|app | memory, and will not scale past a single process.질문1)찾아보니까 express-session 미들웨어의 기본 메모리 저장소(MemoryStore)를 사용할 때 MemoryStore가 개발 환경에서는 적합하지만, 실제 프로덕션 환경에서는 메모리 누수 문제와 단일 프로세스 제한으로 인해 적합하지 않아 프로덕션 환경에서는 Redis, MongoDB 등의 세션 저장소를 사용하라는데, 그럼 front 화면이 나오는건지 궁금합니다,, 문제2)그리고 두번째 문제로 back에서 tail /var/log/nginx/error.log를 했을 땐 아래와 같은 에러가 나왔습니다. ubuntu@ip-172-31-12-59:~/react_nodebird/back$ tail /var/log/nginx/error.log 2024/01/24 12:19:54 [warn] 420260#420260: conflicting server name "api.luckyhaejin.com" on 0.0.0.0:80, ignored 2024/01/24 12:19:54 [notice] 420260#420260: signal process started질문2)찾아보니 Nginx 설정 파일 내에서 api.luckyhaejin.com이라는 서버 이름(server name)이 80 포트에서 두 번 이상 선언되었음을 나타내는 에러라는데 어떤 부분이 잘못되었는지 잘 모르겠어서 어딜 확인하면 좋을지 문의 드립니다. 질문3)강의에서 Ubuntu서버만 바꿔주고 로컬은 바뀌는 부분 이없는거같아서 Ubuntu서버에서만 바꿔줬는데, 그럼 로컬에도 Ubuntu에 설치한 것 다 포함해서 코드까지 다 바꿔준 뒤 Ubuntu에서 git pull 다시 해줘야할까요,,? 현재 설정된 내용)front=> /etc/nginx/nginx.conf => server관련(글을 옮겨적으니까 들여쓰기 해서 정리 한게 코드가 전부 합쳐져서 사진으로 올립니닷,,)front/pacakage.json에서 start부분에 3060 잘 되어있음front => /etc/nginx/nginx.conf front/config/config.js에서 backUrl설정 잘 되어있음back => /etc/nginx/nginx.confback => 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: 'https://luckyhaejin.com', credentials: true })); } else { app.use(morgan('dev')); } 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: true, //일단 false로 하고 https적용할 땐 ture domain: process.env.NODE_ENV = 'production' && '.luckyhaejin.com' //도메인 사용할 경우 }, })); 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(3065, () => { console.log('서버 실행 중'); }); back => /etc/nginx/nginx.conf사용중인 Os) macOS
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
Exception 포스트맨으로 확인 시 undefined 에러
에러[Nest] 48206 - 01/24/2024, 4:13:26 PM ERROR [ExceptionsHandler] You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable. at Object.createInvalidObservableTypeError (/Users/kwonyeji/Documents/nestStudy/a-nest/node_modules/rxjs/dist/cjs/internal/util/throwUnobservableError.js:5:12) at Object.innerFrom (/Users/kwonyeji/Documents/nestStudy/a-nest/node_modules/rxjs/dist/cjs/internal/observable/innerFrom.js:93:36) at doInnerSub (/Users/kwonyeji/Documents/nestStudy/a-nest/node_modules/rxjs/dist/cjs/internal/operators/mergeInternals.js:22:21) at outerNext (/Users/kwonyeji/Documents/nestStudy/a-nest/node_modules/rxjs/dist/cjs/internal/operators/mergeInternals.js:17:70) at OperatorSubscriber._this._next (/Users/kwonyeji/Documents/nestStudy/a-nest/node_modules/rxjs/dist/cjs/internal/operators/OperatorSubscriber.js:33:21) at Subscriber.next (/Users/kwonyeji/Documents/nestStudy/a-nest/node_modules/rxjs/dist/cjs/internal/Subscriber.js:51:18) at /Users/kwonyeji/Documents/nestStudy/a-nest/node_modules/rxjs/dist/cjs/internal/observable/innerFrom.js:120:28 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)2.의심 코드<main.ts>import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger'; import { HttpExceptionFilter } from './httpException.filter'; declare const module: any; async function bootstrap() { const app = await NestFactory.create(AppModule); const port = process.env.PORT || 3000; app.useGlobalFilters(new HttpExceptionFilter()); const config = new DocumentBuilder() .setTitle('Sleact API') .setDescription('Sleact 개발을 위한 API 문서입니다.') .setVersion('1.0') .addTag('connect.sid') .build(); const document = SwaggerModule.createDocument(app, config); SwaggerModule.setup('api', app, document); await app.listen(port); console.log(`listening on port ${port}`) if (module.hot) { module.hot.accept(); module.hot.dispose(() => app.close()); } } bootstrap(); 에러상황회원가입 구현 후 에러 확인 하려고 포스트맨 으로 요청 시 200성공이 떨어지는게 아니라 해당 에러가 발생합니다. 값을 모두 넣어도 같은 에러가 발생하고 console 찍었을떄 아예 controller에 접근하지도 못했습니다. 설정이 잘못된 건지 잘 모르겠습니다 ㅠ
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
class interface 질문
안녕하세요 제로초님 다른 비슷한 질문에서 다음과 같은 답변을 하셨어요 런타임에 있어서 런타임에도 타입체크를 수행하길 원하면 class로 선언하면 되고, 런타임에는 없길 원하면 interface를 쓰시면 됩니다. 런타임이 실제 코드가 실행될때라고 이해하고 있는데 런타임에 타입체크등 코드가 남아있으면 좋은점이 와닿지 않아서요!실제로 어떤 경우에 런타임에 코드가 남아있서서 좋은지, 타입체크가 되면 좋은지 여쭤봐도 될까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 업로드와 관련하여 코드 변경해도 되는지
안녕하세요 선생님 이미지 업로드와 관련한 질문 사항인데요, 도메인 연결 후 이미지 업로드시 이미지가 화면에 안뜨고, 서버에서 아래와 같은 타입 에러가 발생해서 에러 원인을 검색해보았는데, 버전을 2에서 3으로 업그레이드 한 뒤 코드를 수정한 뒤 이미지는 화면에 떴는데, 게시글이 안올라가서 보니까 이미지 Url길이가 너무 길어서 발생한 문제인것 같아서 image테이블에 src컬럼 길이 1000으로 변경하니까 에러가 해결되긴 했는데, 이렇게 변경해도 될까욧?백엔드 에러로그)0|app | Please migrate your code to use AWS SDK for JavaScript (v3). 0|app | For more information, check the migration guide at https://a.co/7PzMCcy 0|app | (Use `node --trace-warnings ...` to show where the warning was created) 0|app | TypeError: this.client.send is not a function 0|app | at _Upload.__uploadUsingPut (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:217:53) 0|app | at _Upload.__doConcurrentUpload (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:280:29) 0|app | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|app | at async Promise.all (index 0) 0|app | at async _Upload.__doMultipartUpload (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:366:5) 0|app | at async _Upload.done (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:190:12)문의1)back/package.json 버전 => aws-sdk 2버전에서 aws-sdk/client-s3 3버전으로 업그레이드{ "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/client-s3": "^3.496.0", "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" } } 수정한 후 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 { S3Client } = require('@aws-sdk/client-s3'); const s3Client = new S3Client({ credentials: { 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(), s3: s3Client, 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)); }); 게시글 업로드시 에러 로그)Error 0|app | at Query.run (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25) 0|app | at /home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/sequelize.js:315:28 0|app | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|app | at async MySQLQueryInterface.insert (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:308:21) 0|app | at async Image.save (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/model.js:2490:35) 0|app | at async Image.create (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/model.js:1362:12) 0|app | at async /home/ubuntu/react_nodebird/back/routes/post.js:60:31 { 0|app | name: 'SequelizeDatabaseError', 0|app | parent: Error: Data too long for column 'src' at row 1 0|app | at Packet.asError (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packets/packet.js:728:17) 0|app | at Execute.execute (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/commands/command.js:29:26) 0|app | at Connection.handlePacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:481:34) 0|app | at PacketParser.onPacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:97:12) 0|app | at PacketParser.executeStart (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packet_parser.js:75:16) 0|app | at Socket.<anonymous> (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:104:25) 0|app | at Socket.emit (node:events:518:28) 0|app | at addChunk (node:internal/streams/readable:559:12) 0|app | at readableAddChunkPushByteMode (node:internal/streams/readable:510:3) 0|app | at Readable.push (node:internal/streams/readable:390:5) { 0|app | code: 'ER_DATA_TOO_LONG', 0|app | errno: 1406, 0|app | sqlState: '22001', 0|app | sqlMessage: "Data too long for column 'src' at row 1", 0|app | sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);', 0|app | parameters: [ 0|app | 'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png', 0|app | '2024-01-23 04:33:31', 0|app | '2024-01-23 04:33:31' 0|app | ] 0|app | }, 0|app | original: Error: Data too long for column 'src' at row 1 0|app | at Packet.asError (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packets/packet.js:728:17) 0|app | at Execute.execute (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/commands/command.js:29:26) 0|app | at Connection.handlePacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:481:34) 0|app | at PacketParser.onPacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:97:12) 0|app | at PacketParser.executeStart (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packet_parser.js:75:16) 0|app | at Socket.<anonymous> (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:104:25) 0|app | at Socket.emit (node:events:518:28) 0|app | at addChunk (node:internal/streams/readable:559:12) 0|app | at readableAddChunkPushByteMode (node:internal/streams/readable:510:3) 0|app | at Readable.push (node:internal/streams/readable:390:5) { 0|app | code: 'ER_DATA_TOO_LONG', 0|app | errno: 1406, 0|app | sqlState: '22001', 0|app | sqlMessage: "Data too long for column 'src' at row 1", 0|app | sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);', 0|app | parameters: [ 0|app | 'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png', 0|app | '2024-01-23 04:33:31', 0|app | '2024-01-23 04:33:31' 0|app | ] 0|app | }, 0|app | sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);', 0|app | parameters: [ 0|app | 'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png', 0|app | '2024-01-23 04:33:31', 0|app | '2024-01-23 04:33:31' 0|app | ] 0|app | } models/image -> src컬럼 길이 200에서 1000으로 변경 const DataTypes = require('sequelize'); const {Model} = DataTypes; module.exports = class Image extends Model { static init(sequelize) { return super.init({ //id가 기본적으로 들어있다 src: { type:DataTypes.STRING(1000), allowNull:false }, },{ modelName: 'Image', tableName: 'images', charset: 'utf8', collate: 'utf8_general_ci', sequelize }); } static associate(db) { db.Image.belongsTo(db.Post); } }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
질문)도메인 연결 후 주소에 추가된 물음표
안녕하세요 선생님 도메인 연결을 했는데, 처음에 Front 도메인을 입력한 뒤 ?가 붙는 원인을 어떻게 알 수 있는지 궁급합니다. 도메인 연결 후 login후 Network => Headers-> RequestURL, Access-Control-Allow-Orign, SetCookie, Application->Cookies에는 도메인주소와 쿠키가 있고, 백엔드 도메인 입력시에는 물음표 안생깁니다. 둘다 화면은 잘 나옵니다.백엔드 도메인 입력시)프론트 도메인 입력시)로그인시 network, application)
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
크롬에서 프론트 서버 구동 시 프론트 IP 주소 페이지 응답이 안됩니다!
안녕하세요! 제로초님[리뉴얼] React로 NodeBird SNS 만들기 강의의섹션 6. AWS에 배포하기: 프론트 서버 배포하기 강의를 진행 중인 수강생 입니다!우분투 프론트 서버는 구동이 되지만 프론트 IP 주소 사이트가 페이지 응답이 되지 않아 질문 올립니다!'로컬 리소스를 로드할 수 없습니다' 에러가 콘솔에 출력 되었지만 새로 고침을 하면서 없어졌습니다!Not allowed to load local resource: chrome-error://chromewebdata/#buttons사전에 아래 사항을 정확히 확인 후 질문을 올립니다!1. EC2 프론트 서버와 백엔드 인스턴스 상태는 잘 실행 중이며,프론트 퍼블릭 IPv4가 틀리지 않았는지 확인하였습니다.2. 로컬 프론트 경로에서 npm run build를 하였습니다.-> 저의 경우 우분투 프론트 서버에서 npm run build를 하면 메모리가 부족해 멈춤 현상이 나타납니다.-> 그래서 .next를 Git LFS로 관리하였고, 로컬 프론트에서 빌드에 성공하였습니다.3. 윈도우 서비스에서 MySQL 서비스를 실행한 상태입니다.4. 우분투 백엔드 서버 실행에 성공한 상태입니다!5. 로컬 프론트 경로에서 node_module과 .next를 삭제했다가 npm i와 build를 통해 다시 만들었습니다.6. about.js는 잠시 바탕 화면으로 옮겼습니다.우분투 프론트 서버에 아래 명령어를 순서대로 입력하였습니다.(우분투 프론트 서버의 경우 sudo를 붙이지 않아도 되었습니다.)sudo git pull>>> 메모리 부족 문제로 npm run build는 로컬 프론트에서 진행하고 아래 작업을 마저 진행했습니다. <<<sudo npx pm2 reload allnpx pm2 start npm -- startsudo npx pm2 monit우분투 프론트 서버가 실행된 상태입니다.우분투 백엔드 서버에 아래 명령어를 순서대로 입력하였습니다.sudo git pullsudo npx pm2 reload allsudo npx pm2 monit우분투 백엔드 서버가 실행된 상태입니다.back/app.js실제 프론트 서버 주소의 CORS 요청을 허용하였습니다.cors 요청 주소들을 변수로 빼서 작성하였습니다. // 로컬 프론트 서버, 노드버드 닷컴, 실제 프론트 서버 URL IP 주소 요청만 허용 const corsOkUrl = ['http://localhost:3000', 'nodebird.com', 'http://52.79.86.100' ]; . . . // 미들웨어 연결 app.use(cors({ /* 특정 url에서 요청했을 때만 cors 허용 */ origin: corsOkUrl, /* 사용자 인증이 필요한 쿠키 전달 허용 */ credentials: true, })); . . . // http://54.180.201.249 : 실제 백엔드 서버 URL IP 주소인 80번 포트로 서버 실행 app.listen(80, () => { console.log('서버 실행 중!'); }); back/config/config.js실제 백엔드 주소가 들어가는 부분 코드에 모두 'backUrl'을 변수로 넣어주었습니다.// 실제 백엔드 서버 URL IP 주소 내보내기 export const backUrl = 'http://54.180.201.249'; front와 back의 package.json이 문제를 해결하기 위해 먼저 노드버드 커뮤니티를 살펴보았습니다.https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49016&category=questionDetail&tab=community&q=164898저와 비슷하게 프론트 서버 구동에 성공하였으나 페이지 응답이 되지 않는 작성자 분이 계셨습니다.글과 똑같이 우분투 프론트 서버 터미널에서 ctrl+c로 sudo npx pm2 monit을 끄고pm2 list를 입력하면 status가 errored 임을 확인할 수 있었습니다.보안 그룹에서 http 80번 포트가 열려있음에도 status는 errored 였습니다.Not allowed to load local resource 에러 해결,우분투 프론트 서버 페이지 응답 등의 키워드로 검색하였으나이미지 외부 경로 지정하기 관련 글들만 있어 방법이 맞는지 의심스럽습니다...프론트 서버 구동 시 어떻게 하면 페이지 응답이 안되는 문제를 해결할 수 있을까요?질문 글이 많이 김에도 끝까지 읽어주셔서 감사합니다제로초님 강의 항상 잘 보고 있습니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 업로드 안되는 문제
선생님 안녕하세요도메인 대신 탄력적 ip2개를 front, back인스턴스에 연결해서 사용중인데요, 로그인이 되지 않았습니다.라는 메세지가 뜨며 이미지 업로드가 안되서 안되 상황입니다. isAuthenticated가 false가 되는 원인을 알고 이 문제를 해결하고 싶어 문의드립니다. 사용중인 ip)back13.209.144.99front13.125.122.77현재 화면)monit에 uploadImages관련 상태 결과 falseerrorlog 전체)에러로그 일부)0|npm | cause: Error: socket hang up 0|npm | at connResetException (node:internal/errors:787:14) 0|npm | at Socket.socketOnEnd (node:_http_client:519:23) 0|npm | at Socket.emit (node:events:530:35) 0|npm | at endReadableNT (node:internal/streams/readable:1696:12) 0|npm | at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { 0|npm | code: 'ECONNRESET' 0|npm | } 0|npm | } 0|npm | TypeError: Cannot read properties of undefined (reading 'data') 0|npm | at loadMyInfo (/home/ubuntu/react_nodebird/front/.next/server/pages/_app.js:531:27) 0|npm | at loadMyInfo.throw (<anonymous>) 0|npm | at next (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1070:32) 0|npm | at currCb (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1195:7) 0|npm | at /home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:346:5 0|npm | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|npm | The above error occurred in task loadMyInfo 0|npm | created by takeLatest(LOAD_MY_INFO_REQUEST, loadMyInfo) 0|npm | created by watchLoadMyInfo 0|npm | created by userSaga 0|npm | created by rootSaga 0|npm | Tasks cancelled due to error: 0|npm | postSaga 0|npm | TypeError: Cannot read properties of undefined (reading 'data') 0|npm | at loadMyInfo (/home/ubuntu/react_nodebird/front/.next/server/pages/_app.js:531:27) 0|npm | at loadMyInfo.throw (<anonymous>) 0|npm | at next (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1070:32) 0|npm | at currCb (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1195:7) 0|npm | at /home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:346:5 0|npm | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)질문1)이미지 업로드시 isAuthenticated가 false가 되는 원인이 뭘까요?질문2)도메인 안쓰고 탄력적 ip 2개 연결해서 쓰면 쿠키가 전달이 안되서 이미지 업로드는 못하나요?질문3)이 부분에 문제가 있을까요?if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'http://13.125.122.77', credentials: true, })); } else { app.use(morgan('dev')); } app.use(cors({ origin: ['http://localhost:3060', 'http://13.125.122.77'], credentials:true }));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' //도메인 사용할 경우 }, }));back/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', 'http://13.125.122.77'], 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 일부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)); });middlewares.jsexports.isLoggedIn = (req, res, next) => { if(req.isAuthenticated()) { next(); } else { res.status(401).send('로그인이 필요합니다.'); } }front에 img src에서 backUrl 지워줌시도해본 것)cors리소스 공유에 아래 내용을 넣어서 실행해보기도 하고 없는 상태에서도 실행해보았지만 상태코드는 401에 이미지 업로드 실패back/package.json 일부"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "cross-env NODE_ENV=production pm2 start app.js" },front/package.json 일부"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 ." },
-
미해결Do it! Node.js 프로그래밍 입문
이강의는 컨트롤러가 안들어가는 이유가 있나요
실무에서는 컨트롤러 없이 라우터 만으로 프로잭트를 진행하는 경우가 많나요?
-
미해결Do it! Node.js 프로그래밍 입문
관리자 로그인 쪽 작업하고 있는 무한루프에 빠져 오픈이 안됩니다.
오류가 뜨지 않고 무한루프에 걸려 있는데 , admin 을 post 로 호출하는 페이지 뿐만 아니라 모든 페이지가 로딩 자체가 안되는데 혹시 무슨 문제가 있는걸까요app. js 에서 아래 코드를 주석 처리하면 다른 페이지도 바로 로딩이 됩니다.app.use(cookieParser);
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인 대신 탄력적 ip연결 후, 프론트 ip가 연결이 안되는 문제
상황)도메인 연결하면 돈이 나간대서 탄력적 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해주었습니다.) 질문)프론트 ip가 화면에 안나오는데 log와 콘솔에 아무것도 안떠서, 이럴 때 화면이 안나오는 원인과 해결방법이 어떻게 되는지 궁금합니다. 질문)보안자격증명의 액세스키에 선생님거는 리전, 서비스가 나와있는데 제거는 코드에 작성한 내용과 연결이 안되서 N/A라고 나오는게 맞나요?시도해본 것)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.jsconst 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.jsconst 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.jsexport const backUrl = 'http://13.209.144.99';profile.jsimport { 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/indeximport { 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
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
백엔드 root 서버에서 npx sequelize db:create을 하면 command not found: sequelize이 뜹니다.
안녕하세요! 제로초님[리뉴얼] React로 NodeBird SNS 만들기 강의의섹션 6. AWS에 배포하기: 우분투에 MySQL 설치하기 까지 진행한 수강생 입니다! 저는 windows 10을 사용하고 있으며, 윈도우 서비스에서 MySQL을 실행한 상태입니다.아마존의 front와 back 인스턴스가 잘 실행되고 있음을 확인하였습니다.사전에 AWS 우분투 프론트와 백엔드 서버 두 곳 모두 node와 npm을 설치하였습니다.node 버전은 v14.21.3, npm 버전은 6.14.18을 설치하였습니다.AWS 우분투 백엔드 서버와 root 서버에서 MySQL 8 버전을 완전 삭제한 후 재설치 하였습니다.(원래 우분투 백엔드 서버에만 설치해야 하는데 루트 경로에 설치하는 바람에 재설치를 진행하였습니다!) 사진과 같이 백엔드 root 서버 터미널에 npx sequelize db:create을 입력하면command not found: sequelize (sequalize 명령을 찾을 수 없습니다.)가 뜹니다. 문제를 해결하기 위해서 첫 번째로 sequelize와 sequelize-cil이back 폴더에 제대로 설치가 되어있는지 확인했습니다.아래 사진과 같이 back 폴더의 package.json 파일에서 시퀄라이즈 잘 설치되어 있음을 확인하였습니다. 두 번째로, 우분투 리눅스 루트 command not found: sequelize,npx sequelize db:create command not found: sequelize 해결시퀄라이즈 command not found 해결등등의 command not found: sequelize 관련 키워드를 구글링 하고,노드버드 강의 커뮤니티 글을 보던 중npx sequelize db:create 대신 sudo npx sequelize db:create 사용하는 방법을 찾았습니다.sudo를 사용해 npx sequelize db:create을 시도하였으나여전히 sequelize 명령어가 없다고 뜹니다.어떻게 하면 백엔드 root 서버에서 npx sequelize db:create을 성공할 수 있을까요?혹시 관련 키워드나 힌트를 주실 수 있나요?항상 강의 열심히 듣고 있습니다. 긴 글 읽어주셔서 감사합니다 제로초님!
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품추천api오류
//상품 추천 api (feat: tensoflow) app.get("/products/:id/recommendation", (req, res) => { const { id } = req.params; //findOne으로 req을 통해 받아온 param값 id에 맞는 상품을조회한다. models.Product.findOne({ where: { id, }, }) .then((product) => { //id와 일치하는 상품에서 type값을 뽑아서, const type = product.type; //type값과 일치하는 상품들을 모두찾는다. models.Product.findAll({ where: { type, id: { //기준이되는 id와 일치하지않는 데이터만찾겠다. //예를들어 id가4번일때 4번을제외한 4번과 같은type의 상품만 보여줘야하는데 //4번도 함께 추천이되니, 4번을 제외하게해준다. [models.Sequelize.Op.ne]: id, }, }, }).then((products) => { res.send({ products, }); }); }) .catch((error) => { console.error(error); res.status(500).send("에러가 발생했습니다.."); }); });server.js에서 추천api를 작성하고 웹에서 확인하려고하면 에러내용TypeError: Cannot read properties of null (reading 'type')at /Users/kimsehun/Desktop/market-prj/h-market-server/server.js:191:28 이런 에러가발생합니다.models-product.jsmodule.exports = function (sequelize, DataTypes) { const product = sequelize.define("Product", { name: { type: DataTypes.STRING(20), allowNull: false, }, price: { type: DataTypes.INTEGER(10), allowNull: false, }, seller: { type: DataTypes.STRING(30), allowNull: false, }, description: { type: DataTypes.STRING(300), allowNull: false, }, imageUrl: { type: DataTypes.STRING(300), allowNull: true, }, soldout: { type: DataTypes.INTEGER(1), allowNull: false, defaultValue: 0, }, type: { type: DataTypes.STRING(50), allowNull: true, }, }); return product; }; 계속보고있는데,findOne부분에서 where을 통해 id값에 해당하는 상품을못찾아서 product에 데이터가 담기지않아서,type을 못불러오는거같은데.뭐가문제일까요??
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
AWS ubuntu 프론트 서버에서 npm run build 가 되지 않습니다!
안녕하세요! 제로초님[리뉴얼] React로 NodeBird SNS 만들기 강의의섹션 6. AWS에 배포하기: 우분투에 노드 설치하기 까지 진행한 수강생 입니다!우분투에 노드 설치하기 강의와 다음 강의인 우분투에 MySQL 설치하기 강의에서도AWS 우분투 프론트 서버에서 npm run build가 성공했음을 확인하지 못하여 질문 글 올립니다!사전에 강의를 진행하면서 AWS 우분투 프론트와 백엔드 서버 두 곳 모두 node와 npm을 설치하였습니다.node 버전은 v14.21.3, npm 버전은 6.14.18을 설치하였습니다.제로초님 강의와 다르게 react-nodebird에 prepare 폴더는 만들지 않습니다.그래서 react-nodebird 폴더 아래에 바로.git, front, back, .gitignore, react-nodebird.pem 파일이 위치해 있습니다. npm run build 를 진행하기 전 우분투 프론트 서버 인스턴스 연결 주소를 정확히 입력하였습니다.ubuntu 프론트 서버에서 git pull과 npm i를 한 다음, npm run build를 진행하였으나빌드가 되지 않고, 에러가 나타났습니다.에러 전체를 번역 후 읽어보니 눈에 띄는 부분은 다음과 같았습니다.Error occurred prerendering page "/about".Read more: https://err.sh/next.js/prerender-error페이지 "/about"을(를) 미리 렌더링하는 동안 오류가 발생했습니다.자세한 내용: https://err.sh/next.js/prerender-errorTypeError: Cannot read property 'data' of undefined유형 오류: 정의되지 않은 속성 '데이터'를 읽을 수 없습니다about을 렌더링하는 동안 오류가 발생했다는 메시지를 확인하고,정적 페이지인 about.js의 getStaticProps를 의심했지만에러 메시지에는 getStaticProps 코드 언급이 없어서 함부로 의심하는 걸 멈췄습니다.https://nextjs.org/docs/messages/prerender-error에러 메시지에 있는 next 사이트를 확인했으나 제 미숙함으로 문제를 해결할 방법을 찾지 못했습니다. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! 이것은 아마도 npm의 문제가 아닐 것입니다. 위에 추가적인 로깅 출력이 있을 것 같습니다.npm ERR! 이 실행의 전체 로그는 다음에서 확인할 수 있습니다:npm ERR! /home/ubuntu/.npm/_logs/2024-01-17T18_39_56_370Z-debug.logvscode 에서 debug.log를 클릭했으나 No match results가 뜨며 로그를 확인할 수 없었습니다. 문제를 해결하기 위해 커뮤니티를 확인하던 중 똑같은 aws 빌드 문제가 발생한 질문 글을 발견하였습니다.-- 해당 질문글 링크 --https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49013&category=questionDetail&tab=community&q=254338해당 질문 글에서 제로초님은 npm i를 다시 하거나styled-components 버전 문제일 가능성을 알려주셨습니다.강의와 똑같이 styled-components ^5.1.1 버전을 사용하고 있음을 확인하였고,다시 우분투 프론트 서버에서 npm install를 한 후, 빌드를 시도해보았으나상단 에러와 똑같은 문제가 발생했습니다.vsCode를 완전히 껐다가 키고, 우분투 인스턴스를 잠시 중시 후 재부팅 해보았음에도같은 문제가 발생하였습니다.node react AWS 구동 방법, AWS E2U 배포, AWS 빌드 문제 npm 관련 키워드를 검색하면서 npm을 실행할 때 종속성이나 캐시 문제 발생이 원인이지 않을까 짐작했습니다.그래서 로컬 front 경로에서 아래 네 가지 작업을 진행하였습니다.(사전에 node_modules 폴더, package.lock.json 파일, .next를 삭제하기 전에로컬 프론트에서 npm run dev, npm run build, npm start 스크립트를 실행해서버가 성공적으로 연결됨을 확인하였습니다.)로컬 front 경로1. node_modules 폴더 삭제2. package.lock.json 삭제3. .next 삭제4. npm cache clean --force 로 npm 캐시 삭제네 가지 작업을 진행한 후 로컬 front에서 다시 npm install을 하여 node_modules과 package.lock.json을 생성하였습니다.다시 aws 우분투 프론트 서버로 돌아와 node, npm이 정상적으로 설치되었음을 확인하고git pull, npm i 를 하고, npm run build를 했지만 문제는 해결되지 않았습니다!어떻게 하면 AWS ubuntu 프론트 서버 경로에서 npm run build를 성공할 수 있을까요?혹시 관련 키워드나 힌트를 주실 수 있나요?aws를 처음 사용해서 미숙함에 질문 글이 많이 길어졌습니다.항상 강의 열심히 듣고 있습니다. 긴 글 읽어주셔서 감사합니다 제로초님!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품상세페이지 구현-2 와 3 사이에 빠진 내용이 있는거같아요
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 상품상세페이지 구현-2 마지막에 보면 css를 적용하고자,product폴더내에 Index.css를 만드는데, Index.js에 css를 import하지 않고 넘어가서 상세페이지구현-3 영상에서는 그냥 css를 적용하고 적용되는 모습이 영상에 담겨있습니다.원래 자동으로 Import 되는게 아니라면, 이부분에 대한 추가적인 제안이 필요할거같습니다. import "./index.css";
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에뮬레이터에 화면 흰색만나오는 문제
import { API_URL } from "./config/constants.js"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, } from "react-native"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import Carousel from "react-native-reanimated-carousel"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then((result) => { const products = result.data.products; setProducts(products); }) .catch((error) => { console.log("error :", error); }); axios .get(`${API_URL}/banners`) .then((result) => { const banners = result.data.banners; setBanners(banners); }) .catch((error) => { console.log("error :", error); }); }, []); return ( <GestureHandlerRootView> <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem={(obj) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}` }} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.headline}>판매되는 상품들!</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.soldout === 1 && <View style={styles.productBlur} />} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, }); 어떤 오류메세지도 뜨지않고,에뮬레이터에 화면이 출력되지않는 문제가 발생합니다.Carousel을 적용하기전에는 화면 잘 출력되었는데,Carousel을 적용하니 화면이 출력되지않네요..Error: PanGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.이러한 오류가 발생해서GestureHandlerRootView 태그로 최상단에 묶어주니 저 오류는 사라졌는데,애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다.서버는 잘 연결되어있는걸 확인햇습니다..뭐가문제일까요
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
미들웨어 확장 패턴 적용 이후 api 제한이 안되는 이슈가 있습니다
미들웨어 확장 패턴 적용 이전에는 api호출 횟수를 넘어서면 handler()함수에 적어넣은 부분이 잘 동작합니다하지만 적용 이후에는 왜 인지 동작하지 않습니다.어떤 이유일까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
nestjs typeorm 에서 mariadb 고가용성 galera cluster 적용 관련
nestjs 좋은 강의 잘 들었습니다.~ 감사합니다.다만 질문이 있습니다.기존코드를 nestjs로 마이그레이션 하고 있습니다.mariadb 고가용성 적용을 해야됩니다. 구글링을 해도 해당 관련한 자료가 별로 없어서 질문드립니다.typeorm type을 보면 replication으론 mater, salves 필드로 고가용성이 지원되는데 cluster 구조로 지원이 되는게 맞는지 알고 싶습니다.아직 응용은 못하는 단계라서 질문 드립니다.만약 typeorm에서 cluster 지원이 되지 않는다면 어떤 방법으로 할 수 있나요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
deploy후에 접속시 오류발생
안녕하세요, 설명 우선 launch를 할때 port를 8080으로 설정하고 setting을 해도fly.toml 파일과 dockkerfile에 port번호가 3000으로 자동으로 설정되는 문제가있어 해당파일의 port번호를 수동으로 8080으로 다시 설정하고 deploy완료했을 때 해당 주소로 접속시에 접속이 안되는 오류가발생합니다. 이미지fly.tomldockkerfilehttps://h-market-server.fly.dev/접속시 오류구글링, 다른분들의 질문을 찾아봤는데도해결하지못해, 질문드립니다. 파일을 지우고 다시런치 후 배포프로젝트를 다 지우고 gitclone해서 런치 후 배포등 다른방법들을 다 진행해봐도 해결되지않아 질문남깁니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
EC2 pem 키를 사용해서 원격에 있는 서버로 접근할 때 WARNING: UNPROTECTED PRIVATE KEY FILE! 문제가 발생합니다!
안녕하세요! 제로초님! 노드버드 섹션6 EC2 생성하기 강의까지 수강한 수강생 입니다!아래 수강생 분과 동일한 문제가 발생하여 구글링과 다른 분들의 질문 글을 보며해결하려 했으나 그러지 못하여 질문을 올리게 되었습니다!항상 친절한 답변을 해주셔서 감사합니다!(강의 항상 잘 보고 있어요!) 같은 문제가 발생한 수강생 분의 질문https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49012&tab=community&category=questionDetail&q=152537키의 권한을 바꾸는 방법 참고https://wookim789.tistory.com/34SSH은 22번 포드, HTTP는 80번 포트, HTTPS는 443번 포트로 강의와 동일하게 진행하였습니다.폴더를 하나 더 들어가야 하는 불편함 때문에 강의와 똑같이 prepare 폴더는 만들지 않고,노드버드 폴더 아래에 바로 front, back 폴더가 위치하도록 하였습니다.vs 터미널에서 발생한 문제 메시지를 번역하니 다음과 같았습니다.경고: 보호되지 않는 개인 키 파일react-nodebird.pem'에 대한 권한이 너무 열려 있습니다.다른 사람이 개인 키 파일에 액세스할 수 없어야 합니다. 이 개인 키는 무시됩니다.로드 키 "react-nodebird.pem": 잘못된 권한ubuntu@ec2-13-125-253-222.ap-northeast-2.compute.amazonaws.com : 권한이 거부되었습니다 같은 문제가 발생한 수강생 분의 글을 읽고 vs 터미널이 아닌 git bash를 사용했습니다.이 때 문제를 해결하신 수강생 분과는 다른 메시지가 나타났습니다.(문제를 해결하신 수강생 분의 git bash 상태)(저의 git bash 상태)응용프로그램에 대한 확장 보안 유지관리가 활성화되지 않았습니다.Expanded Security Maintenance for Applications is not enabled.빨간 선은 개인 정보라 부득이하게 블러 처리하였습니다. ssh -i "react-nodebird.pem" ubuntu@ec2-13-125-253-222.ap-northeast-2.compute.amazonaws.com의심이 들어 다시 vs code 터미널의 노드버드 폴더 경로에 위 명령어를 붙여 넣었으나WARNING: UNPROTECTED PRIVATE KEY FILE! 문제가 계속 발생합니다.어떻게 해야 이 문제를 해결할 수 있는지 도움을 구하고 싶습니다!저 또한 답변만 기다리지 않고 계속 해결 방안을 모색하겠습니다!긴 질문 글 읽어주셔서 감사합니다.
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
빌드 후 /dist 디렉토리가 강사님과 다른데 괜찮을까요
npm run build 후npm run start:prod 했더니 main.js를 찾을 수 없다는 에러 메세지가 나와 디렉토리를 확인해보니 아래와 같았습니다.그리고 main.js는 /dist/src 아래에 있었고요. 일단 packakge.json에서 start:prod의 실행 경로를 'dist/src/main.js'로 변경했고,npm run start:prod해서 서비스 가동되는것 확인했습니다. vsc 종료해도 로컬 호스트로 백엔드 서버 접근과 api 사용까지 이상 없이 되는 것 확인했으니 이대로 aws에 올리고 루트 디렉토리에 /dist 폴더, .env, .gitignore, package-lock.json, package.json만 업로드 해주면 되는걸까요?