노드를 시작하는 방법입니다.HostPresto에서 js 개발!

HostPresto!
이 강좌에서 우리는 새로운 노드를 만들 것이다.HostPresto의 js 응용 프로그램!
Host Presto 설정부터 시작하겠습니다!환경

하위 도메인을 만들려면 다음과 같이 하십시오.

만약에 Host Presto에 등록된 도메인 이름이 있다면! — 니 이름.xyz.이 강좌에서 하위 영역: node를 만들 것입니다.니 이름.xyz
우리는 이것이 가장 자연스럽고 직접적인 방법이라고 생각한다.루트에 튜토리얼 항목을 설정하면 위탁 관리 공간을 오염시킬 수 있습니다.너는 아마도 이미 기존의 웹 사이트를 가지고 있을 것이다.우리가 보기에 www.youname.xyz/node 이런 하위 디렉터리를 추가하는 것도 그다지 편리하지 않다.
cPanel에 로그인한 다음 도메인 섹션의 하위 도메인을 클릭합니다.
하위 필드 필드에 "node"를 입력합니다.
도메인 드롭다운 목록에서 주 도메인(youname.xyz)을 선택합니다.
문서 루트 디렉토리가 자동으로 노드로 채워집니다.니 이름.xyz'.
기본값을 받아들입니다.생성을 클릭합니다.

하위 도메인이 생성되었습니다.브라우저를 가리키면 http://'node.yourname.xyz, 디렉터리 목록을 볼 수 있습니다. — 예를 들면 다음과 같습니다.

이것은 빈 사이트/사이트 폴더가 일반적으로 HostPresto에 표시되는 방식입니다!cPanel 호스트.

노드를 설정하는 중입니다.js 응용 프로그램:

cPanel에서 소프트웨어 섹션으로 이동하고 설정 노드를 선택합니다.js 응용 프로그램.
프로그램을 만들려면 누르십시오.
노드js 버전 — Node의 최신 버전을 선택하겠습니다.js가 목록에서 삭제되었습니다.이 글을 쓸 때는 12.9.0이었다.
응용 모드 — 개발 종료 선택
응용 프로그램 루트 — node를 입력합니다.니 이름.xyz (이것은 우리가 이전 단계에서 만든 하위 영역의 이름)
응용 프로그램 URL — 우리의 하위 구역, 노드를 선택하십시오.니 이름.xyz
응용 프로그램 시작 파일 — 잠시 비워 두십시오. 우리는 1분 후에 이 필드로 돌아갈 것입니다.
승객 로그 파일 — 이것이 바로 우리의 응용 프로그램 로그가 가야 할 곳이다.입력:/home/yourname/logs/node.로그(cPanel 사용자 이름으로 yourname 대체)
만들기 버튼을 클릭

가장 간단한 웹 서버 작성:

cPanel에서 파일 관리자로 이동한 다음 하위 디렉터리로 이동합니다: node.니 이름.xyz.
너는 지금 얼마 남지 않았다는 것을 알게 될 것이다 — main이라는 파일을 만듭니다.js는 노드의 루트 폴더에 있습니다.니 이름.xyz, 파일이: 노드에 위치하도록 합니다.니 이름.xyz/main.js
새 빈 파일을 cPanel 파일 편집기에서 엽니다.네, 여기에 뭘 놓을까요?
공식 노드를 예로 들자.js 웹 사이트:
https://nodejs.org/en/docs/guides/getting-started-guide/
다음 행을 복사하여 주 화면에 붙여넣습니다.js 파일:

const http = require('http');

const hostname = '127.0.0.1'; const port = 3000;

const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World'); });

server.listen(port, hostname, () => { console.log('Server running at http://${hostname}:${port}/'); });

이제 우리는 노드로 돌아갈 수 있다.cPanel에서 js 프로그램을 사용하고 부족한 프로그램 시작 파일 상자를 작성합니다.메인 요리를 넣다.이 분야에서
저장을 클릭합니다.
클릭하여 응용 프로그램 시작
브라우저를 가리키거나 http://node.yourname.xyz (웹 페이지를 새로 고침하거나, 웹 브라우저 옵션이 열려 있는 경우).이제 다음과 같이 표시됩니다.
안녕 세상
성공했어!
멈춰라, 잠깐만!기본적으로호스트 이름은 127.0.0.1, 포트는 3000으로 명시적으로 설정했습니다.우리는 여전히 도메인 이름과 포트 80을 사용하여 응용 프로그램에 접근할 수 있습니까?답은 — Phusion Passenger (https://www.phusionpassenger.com/ 에서 실행되고 Phusion Passenger 는 이 값들을 무시하고 자신의 값을 사용합니다. cPanel에서 접근할 수 없습니다.다행히도 그것들은 바로 우리가 필요로 하는 것이다.

좀 더 재미있는 일을 시작합시다.

처음부터 웹 서버를 작성하는 효율이 높지 않습니다.Node에 사용할 수 있는 많은 유행하는 프레임워크가 있습니다.js.
본 강좌에서 사용Express
코어 노드의 한 멤버가 최초로 구축한 유행하는 프레임이다.js팀."Express는 가장 작고 유연한 Node.js 웹 응용 프로그램 프레임워크로 웹과 모바일 응용 프로그램에 강력한 기능을 제공합니다."
express generator를 실행하려면 명령줄을 사용해야 하기 때문에 SSH 연결을 만듭니다.
Windows에서 PuTTY 프로그램을 사용하는 것이 좋습니다.클라이언트 암호가 아닌 cPanel 사용자 이름과 암호를 사용하십시오!포트 22를 88로 변경 — HostPresto는 포트 88을 사용하여 cPanel 호스트의 ssh 연결을 수행합니다.
로그인 후 프로젝트 가상 환경을 활성화하고 프로젝트 디렉터리에 cd를 넣습니다.어떻게?cPanel은 페이지 상단에 다음과 같은 프롬프트를 표시합니다.
가상 환경에 들어가다.가상 환경에 들어가려면 명령을 실행하십시오. (상황에 따라 "yourname"을 cPanel 사용자 이름과 도메인 이름으로 바꾸십시오.)
source/home/yournamerxy/nodevenv/node.니 이름.xyz/12/bin/activate&&cd/home/yourname xy/node.니 이름.xyz
또는 cPanel 노드에 표시된 명령을 클릭할 수도 있습니다.js 페이지를 클립보드에 복사합니다.그런 다음 PuTTY terminal 창에 명령을 붙여 넣고 실행할 수 있습니다.
프로젝트 디렉터리에 들어갔고 가상 환경이 활성화되었습니다.

응용 프로그램 프레임워크를 생성하려면 다음과 같이 하십시오.

대부분의 프레임워크와 마찬가지로 Express는 응용 프로그램 프레임워크를 만드는 특수한 도구를 가지고 있습니다.프로젝트 디렉토리에서 다음 명령을 실행합니다.
npx express 생성기 - v twig
'나뭇가지'가 뭐예요?이것은 엔진 보기 매개 변수의 선택입니다 — 어떤 템플릿 엔진을 사용합니까?나는 Twig를 사용하는 것을 더 좋아한다. 왜냐하면 PHP와 Python 프로그래머는 기본적으로 Express에서 사용하는 jade 엔진이 아니라 Twig를 더 잘 알고 있기 때문이다.우리는 이 예에서 가는 가지를 사용할 것이다.
express generator를 실행하면 다음과 같은 디렉토리 구조가 표시됩니다.

. │ app.js │ package.json ├───bin │ www ├───public │ ├───images │ ├───javascripts │ └───stylesheets │ style.css ├───routes │ index.js │ users.js └───views error.twig index.twig layout.twig

노드 패키지를 설치하려면:

Express generator에서 패키지를 만듭니다.json 파일이지만 패키지가 설치되어 있지 않습니다.그러니까 우리끼리 해야 돼.다음 명령을 실행합니다.
npm 설치
이 작업은 cPanel을 통해서도 수행할 수 있습니다.노드에는 Run NPM Install이라는 버튼이 있습니다.js 응용 프로그램 관리자입니다.그것은 소포를 검사할 것이다.json 파일이 자동으로 생성되어 사용됩니다.

응용 프로그램 설정을 업데이트하는 중:

어쨌든 cPanel 노드로 돌아가야 합니다.js 프로그램 관리자가 프로그램 설정을 변경합니다.우리의 노드로 넘어가다.니 이름.응용 프로그램 시작 파일을 변경합니다.
프로그램을 넣지 마세요.내가 처음 시도했을 때처럼!Express 응용 프로그램에는 bin/www라는 특정 시작 파일이 있습니다.필드에 "bin/www"만 입력하면 됩니다.
저장을 클릭합니다.
재부팅 을 클릭합니다.
이것은 현재 브라우저에서 볼 내용입니다.

생성된 응용 프로그램의 유일한 다른 페이지는 사용자 페이지입니다.http://node.yourname.xyz/users
리소스로 응답
이것은express generator가 우리를 위해 생성한 내용이다.그다지 인상적이지 않다.
페이지 정보 추가하기

페이지 정보를 추가하려면 다음과 같이 하십시오.

우리들은 복사와 붙이는 일을 좀 합시다.응용 프로그램을 엽니다.cPanel 파일 편집기에서 js 파일을 만들고 두 줄을 추가하여 기존 줄을 복사합니다(아래는//NEW 표시).

var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan');

var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); var aboutRouter = require('./routes/about'); // NEW

var app = express();

// view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'twig');

app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter); app.use('/users', usersRouter); app.use('/about', aboutRouter); // NEW

// catch 404 and forward to error handler app.use(function(req, res, next) { next(createError(404)); });

// error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page res.status(err.status || 500); res.render('error'); });

module.exports = app;

그런 다음 파일 관리자에서 뷰 디렉토리로 이동하여 색인을 복사합니다.나뭇가지를 줄로 쓸어 대략적으로 만들다.잔가지
색인에 대해 같은 조작을 실행합니다."routes"디렉터리의 js 파일 — 그것을 대략적으로 복제하다.js
새 정보를 엽니다.js 파일을 다음과 같이 변경합니다.

var express = require('express'); var router = express.Router();

/* GET about page. */ router.get('/', function(req, res, next) { res.render('about', { title: 'About' }); });

module.exports = router;

노드로 이동합니다.cPanel에 js 프로그램 관리자를 설치하고 프로그램을 다시 시작한 다음 새 About 페이지를 시도하십시오: http://node.yourname.xyz/about

완성된 것처럼 보이기 위해서 메뉴를 추가합니다.보기/배치를 엽니다.세부 파일을 다음과 같이 변경합니다.

<!DOCTYPE html> <html> <head> <title>{{ title }}</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <nav id="nav"> <ul id="navigation"> <li><a href="/">Home</a> <li><a href="/about">About</a> <li><a href="/users">Users</a> </ul> </nav> <div id="content"> { % block body % }{ % endblock % } </div> </body> </html>

"nav"부분을 추가한 다음 "div"를 {%block body%}에 놓으십시오
(나는 이전에 가는 가지 템플릿을 사용한 적이 없지만 문법은 파이톤의 Django 템플릿이나 Jinja 템플릿과 매우 비슷해 보인다)
마지막으로 스타일 추가 — 공용/스타일시트/스타일을 엽니다.css 파일 및 다음을 추가합니다.

#navigation { margin:0; padding: 0; position:relative; float:left; border-right:1px solid #c4dbe7; }

#navigation li { font-size:12px; font-weight:bold; margin:0; padding:0; float:left; position:relative; border-top:1px solid #c4dbe7; border-bottom:2px solid #c4dbe7; }

#navigation li a { padding:10px 25px; color:#616161; text-shadow:1px 1px 0px #fff; text-decoration:none; display:inline-block; border-right:1px solid #fff; border-left:1px solid #C2C2C2; border-top:1px solid #fff; background: #f5f5f5; }

#navigation li a:hover { background:#f8f8f8; color:#282828; }

#navigation li:hover > a { background:#fff; }

#content { clear: both; padding: 10px; }

완료되면 애플리케이션을 다시 시작합니다.

해냈습니다.Node를 사용하여 구축된 완전한 작업 응용 프로그램입니다.js와 Express.js.
다음 단계는 MySQL 데이터베이스를 응용 프로그램에 추가하는 것입니다.그러나 이것은 상당히 간단하다. 우리는 공식 지침을 사용하는 것을 건의한다.
https://expressjs.com/en/guide/database-integration.html#mysql
관리해야 합니까?우리의 것을 시험해 보세요. 그것은 속도가 빠르고 신뢰성이 높으며, 기능이 강하여 믿을 수 있도록 지원합니다.
HostPresto!
프레스토 여관!가격이 합리적이고 위탁 관리가 믿을 만하다.무엇이 그것을 이렇게 훌륭하게 만들었는가 — 많은 위탁 관리 공급자와 마찬가지로, 그들은 당신에게 기존의 PHP와 MySQL을 제공하지만, 대부분의 다른 공급자와 달리, 그들은 당신에게 매우 간단한 해결 방안을 제공하여, 거의 모든 종류의 응용 프로그램, 노드를 위탁 관리할 수 있다.js, Django, Flask, Rubyon Rails 등등.이 모든 응용 프로그램은 같은 서버에서 공존할 수 있습니다!뭐가 호스트프레스토를!어떤 개발자에게도 좋은 선택이다.
최초 발표https://hostpresto.com.