우분투에 MERN 앱을 설치하는 방법
6179 단어 mongodbubuntumernapplication
MERN은 MangoDB, Express, React 및 Node.js의 축약형입니다. 개발자는 웹에서 MERN을 사용하여 애플리케이션을 빌드합니다.
전제 조건
Ubuntu 20.04 설치dedicated server 또는 KVM VPS .
루트 사용자 액세스 또는 관리 권한이 있는 일반 사용자입니다.
Install MERN App on Ubuntu
1. 서버를 최신 상태로 유지
# apt update -y
2. NodeJS 설치
먼저 NodeJS를 다운로드해야 합니다.
NodeJS의 안정적인 최신 릴리스를 다운로드하십시오.
# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -
이제 다음 명령을 사용하여 NodeJS를 설치합니다.
# apt install -y nodejs
3. 몽고DB 설치
패키지 관리 시스템에서 사용하는 공개 키를 가져와야 합니다. 다음 명령을 사용하여 가져올 수 있습니다.
# wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
Ubuntu 버전에 대한 목록 파일/etc/apt/sources.list.d/mongodb-4-4.list를 만듭니다. 다음 명령을 사용하여 목록 파일을 만들 수 있습니다.
# echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-4-4.list
다음으로 로컬 패키지 데이터베이스를 업데이트해야 합니다. 이전에 MongoDB 4.4를 설치하기 위해 만든 파일을 참조합니다.
# apt update -y
이제 다음 명령을 사용하여 MongoDB 4.4를 설치합니다.
# apt install mongodb-org -y
MongoDB 서비스 시작 및 활성화
# systemctl start mongod
# systemctl enable mongod
4. NPM 프로젝트 설정
앱에 대한 새 디렉터리를 만듭니다.
# mkdir -p app && cd app
package.json 파일을 만듭니다.
# npm init -y
프로젝트 종속성: Express 웹 프레임워크, MongoDB 드라이버, React, React DOM, Webpack, Babel 및 Dotenv를 설치합니다.
# npm i express mongodb react react-dom webpack webpack-cli html-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader dotenv
코드에 대한 디렉터리를 만듭니다.
# mkdir src
# mkdir src/public
Express의 기본 서버 코드가 포함된 src/index.js를 만듭니다.
# vi src/index.js
다음을 붙여넣습니다.
if (process.env.NODE_ENV !== "production") {
require("dotenv").config();
}
const path = require("path");
const express = require("express");
const app = express();
const { MongoClient } = require("mongodb");
(async () => {
const mongo = new MongoClient(process.env.MONGODB);
try {
await mongo.connect();
} catch (e) {
console.log("Failed connecting to MongoDB");
console.log(e);
process.exit(1);
}
console.log("Connected to MongoDB");
app.use(express.static(path.join(__dirname, "../dist")));
app.listen(process.env.PORT);
console.log(`HTTP listening on ${process.env.PORT}`);
})();
파일을 저장하고 종료합니다.
앱의 React 부분에 대한 기본 코드가 포함된 src/public/App.jsx를 만듭니다.
# vi src/public/App.jsx
다음을 붙여넣습니다.
import React from "react";
import ReactDOM from "react-dom";
const App = () => (
<div>
<h1>MERN App</h1>
</div>
);
ReactDOM.render(<App />, document.querySelector("#app"));
파일을 저장하고 종료합니다.
컴파일된 React 코드가 삽입될 기본 HTML을 포함하는 src/public/index.html을 만듭니다. 또한 렌더링할 루트 요소도 있습니다.
# vi src/public/index.html
다음을 붙여넣습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MERN Application</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
파일을 저장하고 종료합니다.
Webpack에 프로젝트를 묶는 방법을 알려주는 webpack.config.js를 만듭니다.
# vi webpack.config.js
다음을 붙여넣습니다.
module.exports = {
entry: "./src/public/App.jsx",
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: "babel-loader",
},
],
},
plugins: [
new (require("html-webpack-plugin"))({
template: "./src/public/index.html",
}),
],
};
참고: 'development' 모드로 설정되어 있습니다. 이것은 개발용입니다. 프로덕션 수준에서 사용하는 경우 '프로덕션'으로 자유롭게 변경할 수 있습니다.
파일을 저장하고 종료합니다.
React 코드를 컴파일하도록 Babel을 구성하는 .babelrc를 만듭니다.
# vi .babelrc
다음을 붙여넣습니다.
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
파일을 저장하고 종료합니다.
포트 및 MongoDB 데이터베이스 URL을 구성하는 .env를 만듭니다.
# vi .env
다음을 붙여넣습니다.
PORT=8080
MONGODB=mongodb://localhost
파일을 저장하고 종료합니다.
앱을 빌드합니다.
# npx webpack
앱을 시작합니다.
# node src/index.js
이제 브라우저로 이동하여 [serverIP]:8080에 액세스합니다.
Reference
이 문제에 관하여(우분투에 MERN 앱을 설치하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/hostnextra/how-to-install-mern-app-on-ubuntu-a4h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
