add user해서 새로운 계정을 만든다. 루트에 대한 권한은 없는대신 포트 0~1000번 까지는 가능하게끔 설정한다. 

/usr/local/ 에 새 디렉토리 생성한다.

그리고 해당 디렉토리에 대해 user에게 접근권한을 준다.

images 같은 디렉토리는 서버 디렉토리 외부에 만들고 그 디렉토리에 대한 권한을 user에게 준다.

nginx, filezilla, putty 이용! 단 node.js는 nginx가 없어도 바로 그대로 배포할 수 있다!

cors 오류를 없애려면

클라이언트와 서버가 같은 ip에 있게 하거나

클라이언트와 서버간 서로의 ip에 대한 통신을 허용해야한다!

const express = require('express');
const app = express();
const mongoose = require("mongoose");
const cors = require('cors');
const bodyParser = require('body-parser')
//Image Schema 이미지 데이터 스키마
const { Image } = require('./models/index.js');
const multer = require('multer')
// require('dotenv').config();

//DB 연결
mongoose.connect("mongodb://localhost:27017/image-test");
mongoose.connection.on("connected", () => {
    console.log("DB connect success");
})
mongoose.connection.on("error", (err) => {
    console.log(err);
})

//필요 middle-ware 연결
app.use(cors());
app.use(express.json());

//정적 파일 제공하기위한 static
//현재 '/imgaes' 의 디렉토리에 있는 정적 파일에 외부 접근을 허용한 상태
//추후 배포할 때 디렉토리 지정필요
app.use(express.static('/images'));


//req.body 사용하기 위한 bodyParser
app.use(bodyParser.json())
app.use(bodyParser.urlencoded())
app.use(bodyParser.urlencoded({ extended: true }));


app.get("/", (req, res) => {
    res.send("hello!");
})

//이미지를 저장할 서버 폴더 선택
//이미지 파일은 서버에서 저장하고 DB에는 이미지에 대한 메타태그만 저장!
var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        // console.log("dest:", req);
        //서버컴퓨터의 /imgaes 디렉토리에 받은 파일 저장하겠다는 뜻
        cb(null, "/images");
    },
    filename: (req, file, cb) => {
        //파일 이름이 겹치는걸 막기 위해 Date 이용해서 구분
        cb(null, `${Date.now()}_${file.originalname}`);
    },
});

//"img" 는 클라이언트에서 보내는 요청 FORMDATA의 태그와 동일해야함
let upload = multer({ storage }).single("img");
// user가 이미지 업로드하는 요청
app.post("/upload", (req, res) => {
    console.log("req:", req);
    upload(req, res, (err) => {
        if (err) {
            return res.json({ success: false, err });
        }
        //client가 업로드하는 이미지 파일은 res.req.file 에 담긴다.
        //그외 client가 부가적으로 포함해 전송하는 데이터는 res.req.body에 담긴다.
        //이후에 client가 전송하는 이미지파일 + 사용자 id + .. 등등을 바탕으로 몽고db에 데이터 추가하는 것을 구현해야함
        return res.json({
            success: true,
            image: res.req.file.path,
            fileName: res.req.file.filename,
            type: JSON.parse(res.req.body.type),
            userId: res.req.body.userId,
        });
    });
});


app.listen(8010, () => {
    console.log('server open');
})

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const cors = require("cors");
const bodyParser = require("body-parser");
//Image Schema
const { Image } = require("./models/index.js");
const multer = require("multer");
// require('dotenv').config();

//DB 연결
// mongoose.connect("mongodb://localhost:27017/image-test");
// mongoose.connection.on("connected", () => {
//     console.log("DB connect success");
// })
// mongoose.connection.on("error", (err) => {
//     console.log(err);
// })

//필요 middle-ware 연결
app.use(cors());
app.use(express.json());

//정적 파일 제공하기위한 static
//app.use(express.static('/images'));
app.use(express.static("images"));
//req.body 사용하기 위한 bodyParser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.send("hello!");
});

//client가 image upload (post)요청 하면
//client가 준 데이터를 받아서 mongoDB에 저장

//이미지를 저장할 서버 폴더 선택
//이미지 파일은 서버에서 저장하고 DB에는 이미지에 대한 메타태그만 저장!
// 지금은 빌드 내부의 디렉토리에 저장하고 있는데 빌드 내부 디렉토리에 저장하는 것이 아닌 서버의 루트 디렉토리를 통한 경로를 지정해주어야함
// %루트 디렉토리 -> 권한 문제 % ?
var storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // console.log("dest:", req);
    //서버의 uploads 디렉토리에 받은 파일 저장하겠다는 뜻
    cb(null, "images");
  },
  filename: (req, file, cb) => {
    //파일 이름이 겹치는걸 막기 위해 Date 이용해서 구분
    cb(null, `${Date.now()}_${file.originalname}`);
  },
});

//"img" 는 클라이언트에서 보내는 요청과 동일해야함
let upload = multer({ storage }).single("img");

// user가 이미지 업로드하는 요청
app.post("/upload", (req, res) => {
  //   console.log("req:", req);
  upload(req, res, (err) => {
    if (err) {
      return res.json({ success: false, err });
    }
    return res.json({
      success: true,
      image: res.req.file.path,
      fileName: res.req.file.filename,
      type: JSON.parse(res.req.body.type),
      userId: res.req.body.userId,
    });
  });
});

app.get("/users/:id", (req, res) => {
  const { id } = req.params;
  console.log(id);

  //해당 img url 전송
  const urls = [
    {
      id: 1,
      src: "http://localhost:8010/1659281197154_top2.jpg",
      type: "top",
      userId: "1234",
    },
    {
      id: 2,
      src: "data:image/jpeg;base64,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",
      type: "top",
    },
    { id: 3, src: "http://localhost:8010/1659281197154_top2.jpg", type: "top" },
    { id: 4, src: "http://localhost:8010/1659281197154_top2.jpg", type: "top" },
    { id: 5, src: "http://localhost:8010/1659281197154_top2.jpg", type: "top" },
    { id: 6, src: "http://localhost:8010/1659281197154_top2.jpg", type: "top" },
    { id: 7, src: "http://localhost:8010/1659281197154_top2.jpg", type: "top" },
    { id: 8, src: "http://localhost:8010/1659281197154_top2.jpg", type: "top" },
    { id: 9, src: "http://localhost:8010/1659281197154_top2.jpg", type: "top" },
    {
      id: 10,
      src: "http://localhost:8010/1659281197154_top2.jpg",
      type: "top",
    },

    { id: 11, src: "http://localhost:8010/shoe1.jpg", type: "shoe" },
    { id: 12, src: "http://localhost:8010/shoe1.jpg", type: "shoe" },
    { id: 13, src: "http://localhost:8010/shoe1.jpg", type: "shoe" },
    { id: 14, src: "http://localhost:8010/shoe1.jpg", type: "shoe" },
    { id: 15, src: "http://localhost:8010/shoe1.jpg", type: "shoe" },
    { id: 16, src: "http://localhost:8010/shoe1.jpg", type: "shoe" },
    { id: 17, src: "http://localhost:8010/shoe1.jpg", type: "shoe" },
    { id: 18, src: "http://localhost:8010/bot1.jpg", type: "bot" },
    { id: 19, src: "http://localhost:8010/bot1.jpg", type: "bot" },
    { id: 20, src: "http://localhost:8010/bot1.jpg", type: "bot" },
    { id: 21, src: "http://localhost:8010/bot1.jpg", type: "bot" },
    { id: 22, src: "http://localhost:8010/bot1.jpg", type: "bot" },
    { id: 23, src: "http://localhost:8010/bot1.jpg", type: "bot" },
    { id: 24, src: "http://localhost:8010/bot1.jpg", type: "bot" },
    {
      id: 25,
      src: "data:image/png;base64,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",
      type: "what",
    },
    {
      id: 26,
      src: "data:image/png;base64,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",
      type: "what",
    },
    {
      id: 27,
      src: "data:image/png;base64,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",
      type: "what",
    },
    {
      id: 28,
      src: "data:image/png;base64,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",
      type: "what",
    },
  ];
  res.send(urls);
});

app.listen(8010, () => {
  console.log("server open");
});

react build한 후 html 파일을

res.sendFile 해주면 된다

const express = require('express')
const app = express()
const path = require('path')

app.listen(8030, function () {
    console.log('listening on 8030')
})

app.use(express.static(path.join(__dirname, 'prac/build')));

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'prac/build/index.html'));
})

main.js

const express = require('express')
const app = express()
const port = 3000
var fs = require('fs');
var template = require('./lib/template.js');
var bodyParser = require('body-parser');
var qs = require('querystring');
var compression = require('compression');
var indexRouter = require('./routes/index');
var topicRouter = require('./routes/topic');


app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(compression())
app.get('*', function (request, response, next) {
  fs.readdir('./data', function (error, filelist) {
    request.list = filelist;
    next();
  });
})

//route
app.use('/', indexRouter);
app.use('/topic', topicRouter);


app.use(function (req, res, next) {
  res.status(404).send('Sorry cant find that!');
});


app.use(function (err, req, res, next) {
  console.log(err);
  console.error(err.stack);
  res.status(500).send('Somesaddasdasthing broke!');
});



app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

topic.js

var express = require('express')
var router = express.Router();
var path = require('path');
var sanitizeHtml = require('sanitize-html');
const { filter } = require('compression');
var fs = require('fs');
var template = require('../lib/template.js');



router.get('/create', (req, response) => {
    var title = 'WEB - create';
    var list = template.list(req.list);
    var html = template.HTML(title, list, `
        <form action="/topic/create" method="post">
          <p><input type="text" name="title" placeholder="title"></p>
          <p>
            <textarea name="description" placeholder="description"></textarea>
          </p>
          <p>
            <input type="submit">
          </p>
        </form>
      `, '');
    response.send(html);
});

router.post('/create', (request, response) => {
    var post = request.body;
    var title = post.title;
    var description = post.description;
    fs.writeFile(`data/${title}`, description, 'utf8', function (err) {
        response.redirect(`/topic/${title}`);
    })
})


router.get('/update/:pageId', (request, response) => {
    var filteredId = path.parse(request.params.pageId).base;
    fs.readFile(`data/${filteredId}`, 'utf8', function (err, description) {
        var title = request.params.pageId;
        var list = template.list(request.list);
        var html = template.HTML(title, list,
            `
          <form action="/topic/update" method="post">
            <input type="hidden" name="id" value="${title}">
            <p><input type="text" name="title" placeholder="title" value="${title}"></p>
            <p>
              <textarea name="description" placeholder="description">${description}</textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
          `,
            `<a href="/topic/create">create</a> <a href="/topic/update/${title}">update</a>`
        );
        response.send(html);
    });
});

router.post('/update', (request, response) => {
    var post = request.body;
    var id = post.id;
    var title = post.title;
    var description = post.description;
    fs.rename(`data/${id}`, `data/${title}`, function (error) {
        fs.writeFile(`data/${title}`, description, 'utf8', function (err) {
            response.redirect(`/topic/${title}`);
        })
    });
});




router.post('/delete_process', (request, response) => {
    var post = request.body;
    var id = post.id;
    var filteredId = path.parse(id).base;
    fs.unlink(`data/${filteredId}`, function (error) {
        response.redirect('/topic/');
    })
});





router.get('/:pageId', (req, response, next) => {
    var filteredId = path.parse(req.params.pageId).base;
    console.log(filteredId);
    fs.readFile(`data/${filteredId}`, 'utf8', function (err, description) {
        if (err) {
            next(err);
            return;
        }
        var title = req.params.pageId;
        var sanitizedTitle = sanitizeHtml(title);
        var sanitizedDescription = sanitizeHtml(description, {
            allowedTags: ['h1']
        });
        var list = template.list(req.list);
        var html = template.HTML(sanitizedTitle, list,
            `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
            ` <a href="/topic/create">create</a>
            <a href="/topic/update/${sanitizedTitle}">update</a>
            <form action="/topic/delete_process" method="post">
              <input type="hidden" name="id" value="${sanitizedTitle}">
              <input type="submit" value="delete">
              </form>`
        );
        response.send(html);
        next('route');
    });
});




router.get('/', (request, response) => {
    var title = 'Welcome';
    var description = 'Hello, Node.js';
    var list = template.list(request.list);
    var html = template.HTML(title, list,
        `<h2>${title}</h2>${description}
      <img src="/images/hello.jpg" style="width:300px; display:block; margin-top:20px">
      `,
        `<a href="/topic/create">create</a>`
    );
    response.send(html);
})

module.exports = router;

index.js

const express = require('express');
const router = express.Router();
var template = require('../lib/template.js');


router.get('/', (request, response) => {
    console.log(request.list);
    var title = 'Welcome';
    var description = 'Hello, Node.js';
    var list = template.list(request.list);
    var html = template.HTML(title, list,
        `<h2>${title}</h2>${description}
      <img src="/images/hello.jpg" style="width:300px; display:block; margin-top:20px">
      `,
        `<a href="/topic/create">create</a>`
    );
    response.send(html);
})

module.exports = router;