Azure Static Web Apps를 사용하여 Star Wars Crawler 빌드 - 1부
11939 단어 nodejavascriptstaticwebappstutorial
Hi friends!! Today's post will be very different! It's an epic blog post - because we know May 4 is a special day, right?
오늘은 HTML, CSS, JavaScript 및 Node.js를 사용하여 _Star Wars Intro)를 개발하는 방법에 대해 설명하겠습니다. 그런 다음 개인 프로젝트에 적합한 무료 계층이 포함된 Azure의 호스팅 서비스인 Azure Static Web Apps을 사용하여 애플리케이션을 호스팅하는 방법을 알려드리겠습니다.
시작합니다!
1. 소개
모든 스타워즈 팬은 인트로가 어떻게 작동하는지 알고 있지만, 인트로를 본 적이 없거나 어떻게 생겼는지 잊어버린 사람들을 위한 것입니다. 이것이 바로 지금 구축할 소개 환경입니다. 우리는 개발을 위해 다음 리소스를 사용할 것입니다.
2. 시작하기
종속성을 캡처하기 위해
package.json를 생성하여 Node.js 개발을 시작합니다.npm init -y
다음으로 개발 환경에 대한 다른 종속 항목과 함께 Express.Js(앱용)을 설치합니다. 예를 들어, 저는
eslint를 사용하여 프로젝트를 체계적으로 유지하는 것을 좋아하므로 이를 설치하고 구성하겠습니다.npm install express --save
npm install eslint --save-dev
npm i nodemon
npm i eslint-friendly-formatter
npm i prettier
npm i husky --save-dev
비교를 위해 최종
package.json 파일에 대한 내 소스 저장소를 확인하십시오. 엄청난! 계속 갑시다!3. 앱 구조 만들기
기본 프로젝트 폴더에 다음 프로젝트 구조(명령줄 또는 IDE 사용)를 설정해 보겠습니다.
app.js
public/
css/
style.css
js/
intro.js
index.html
Visual Studio Code를 내 IDE로 사용하는 것을 선호합니다. 작업을 완료하면 what my project structure looks like입니다.
4. app.js 업데이트
Node.js를 사용하여 정적 웹 애플리케이션을 만들고 있으므로 Express.js를 사용해야 합니다. 다음 코드를
app.js 파일에 복사합니다./**
* File: app.js
* Description: File responsible for running the application
* Data: 05/04/2022
* Author: Glaucia Lemos <Twitter: @glaucia_lemos86>
*/
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => {
res.send('App - Star Wars Intro');
});
app.listen(3000, () => console.log('Application is running on port 3000!'));
5. index.html 업데이트
간단한 Express 애플리케이션이 작동하는지 테스트하려면 다음 코드를
index.html 파일에 복사하십시오. 보시다시피 스타일링에 Boostrap framework을 사용하고 있습니다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<title>Star Wars Intro App</title>
</head>
<body>
<script src="js/intro.js"></script>
</body>
</html>
6. Express 앱 실행
nodemon를 사용하여 이 기본 Express 응용 프로그램을 실행합니다.nodemon
기본 웹 애플리케이션을 보려면 브라우저를
localhost:3000로 실행하십시오.
다음과 같아야 합니다. 이렇게 하면 Express를 올바르게 구성했음을 확인할 수 있습니다. 🎉
7. 그 앱을 만드세요!
모든 크롤러는
A Long Time Ago, in a galaxy far, far away...라는 유명한 문장으로 시작합니다.자, 첫 번째 코드 블록을 개발하고 시작 문장을 작성해 봅시다. 이를 위해 다음 파일을 수정하겠습니다. 계속해서 이것을 복사하십시오. 그러면 다음에 수행하는 작업을 살펴보겠습니다.
7.1 index.html
<!DOCTYPE html>
<html>
<head>
(...)
</head>
<body>
<section class="intro text_intro">
A Long Time Ago, in a galaxy far,<br> far away ...
</section>
<script src="js/intro.js"></script>
</body>
</html>
7.2 스타일.css
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
body {
margin: 0;
background: #000;
overflow: hidden;
}
.intro {
position: absolute;
top: 40%;
left: 20%;
z-index: 1;
}
.intro_text {
font-family: "News Cycle", sans-serif;
color: #00BFFF;
font-weight: 400;
letter-spacing: .1em;
}
7.3 앱 실행
응용 프로그램을 다시 실행하고 문장이 나타나는지 확인합니다.
7.4 무슨 일이 있었나요?
여기서 무슨 일이 일어나고 있는지 이해합시다.
NewCycle 글꼴을 가져왔습니다. black로 설정하고 여백을 제거하여 공간 효과를 구현했습니다! .intro 클래스를 사용하여 요소를 배치하고 .intro_text 클래스를 사용하여 글꼴을 적용합니다. 아름답지 않나요?! 하지만 잠깐만요. 배너가 움직여야 하지 않나요? 예, 그렇습니다! 이 시리즈의 2부에서는 JavaScript의 마법으로 어떻게 작업을 수행할 수 있는지 알려드립니다!!
네 번째가 당신과 함께하기를 바랍니다!
Reference
이 문제에 관하여(Azure Static Web Apps를 사용하여 Star Wars Crawler 빌드 - 1부), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/azure/building-star-wars-crawler-with-azure-static-web-apps-part-1-3o39텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
