요구사항 배경 : 프론트엔드로, 특히 중소 기업일 경우 배포에 대한 이해도 필요합니다. 이번에는 프런트 엔드 기본 프로젝트 배포를 소개합니다. 이번에 알리바바 클라우드 서버를 이용한 배포
핵심 단계 배포
1. 패키지된 프런트 엔드 코드(dist 패키지) 또는 html 파일을 준비합니다.
2. Alibaba Cloud 서버를 구입하고 연결합니다.
3. Alibaba Cloud 서버용 ngnix를 설치하여 웹 서비스를 엽니다
. 4. xshell 및 sftp를 사용하여 넣습니다. 프런트 엔드 코드를 서버에
1. 프런트 엔드 코드 준비
이 부분은 쉽고 원하는대로 준비할 수 있습니다. 여기에 vue 스캐폴딩을 설정한 다음 dist 패키지를 만들었습니다.
번거로우시면 그냥 html 파일을 직접 사용하시고 그 안에 아무거나 쓰시면 됩니다.
2. 알리바바 클라우드 서버 구매
연습용이라면 가장 저렴한 것을 구입해도 괜찮습니다. 사실 아무것도 아닙니다. 국내 지역을 선택한 다음 가장 저렴한 구성을 선택하십시오. 운영 체제는 일반적으로 centOS64를 선택하고 공용 네트워크 IP의 무료 할당을 선택합니다.
구매가 완료된 후 어디에 있는지 모를 수 있습니다. 콘솔을 클릭한 다음 클라우드 서버 ECS를 찾아야 합니다.
그러면 서버를 찾을 수 있습니다. 가장 중요한 것은 인스턴스(서버 상태 관리)와 보안 그룹(서버에 액세스할 수 있는 포트 번호 제어)입니다.
인스턴스에서 원격접속을 클릭하여 정상적으로 접속이 가능한지 확인합니다. 여기서의 ip address(public)는 나중에 접속하고자 하는 서버의 ip address이고 다른 사람이 자신의 웹사이트를 방문하기 위한 주소이기도 하므로 주의를 기울이시면 됩니다.
페이지에 이 메시지가 표시되면 원격 연결에 성공한 것입니다.
3. ngnix를 설치하여 Alibaba Cloud 서버용 웹 서비스 열기
준비: xshell(서버 연결에 사용) 및 xftp(파일 업로드에 사용)를 설치합니다 .
이 두 소프트웨어를 설치하는 방법: 360 Security Guard에서 직접 설치합니다. 빠르고 독성이 없습니다.
b. xshell을 열고 원격 서버에 연결
그런 다음 사용자 이름(일반적으로 루트)과 암호를 입력하라는 메시지가 나타납니다. 드디어 접속 성공
축하합니다. 이제 서버와 통신할 수 있습니다. 지금은 클라우드 서버에서 원격으로 접속할 수도 있지만 일반적으로 xshell을 사용하는 것이 더 편리합니다.
여기에 연결할 수 없는 경우 주의하십시오. 그럼 내 발걸음을 조심해야 해! ! ! ! 매우 중요! ! ! 보안 그룹을 설정하려면 클라우드 서버 페이지로 이동하십시오.모두이 단계를 수행하는 것이 좋습니다! ! ! !
항목 22를 추가합니다(이는 xshell에 연결된 포트 번호와 일치해야 하며 xshell은 기본적으로 22입니다). 다른 옵션은 그림에 표시됩니다.
위와 동일한 단계로 nginx에 대한 또 다른 80 항목을 추가합니다.
c. 리버스 프록시 nginx
명령 설치: yum install nginx
그런 다음 선택할 수 있도록 중간에 중지됩니다. y를 입력하고 Enter 키를 누릅니다. 드디어 설치 성공입니다.
이것이 완료되면 성공을 의미
하지만 현재 서버에 nginx만 설치했으며 원격 서버에서 nginx 서비스를 시작하지 않았습니다. 다음은 사용할 수 있는 몇 가지 명령입니다. 먼저 모두 공개하고 나중에 일부만 사용하겠습니다. (ngnix에 nginx를 입력하지 않도록 주의하세요!!!!!!!!!!!!!!!! 저는 항상 실수를 합니다)
nginx 설치: yum install nginx
ngnix 프로세스가 있는지 확인: netstat -anput | grep nginx
서버 포트 확인 occupancy: netstat -ntlp
nginx start: nginx
nginx restart: nginx -s reload
close nginx:
nginx -s stop: nginx를 빠르게 중지
nginx -s 종료: nginx를 완전히 그리고 순서대로 중지
기본 nginx 구성 파일 경로 보기: nginx -t
d. nginx
명령 시작: nginx, 일반적으로 입력 후 피드백이 없습니다. nginx가 시작되었는지 확실하지 않은 경우 netstat -anput | grep nginx 명령을 사용하여 nginx 포트가 점유되어 있는지 확인할 수 있습니다. 위 그림에서
나오시면 netstat -anput | grep nginx 명령을 입력하여 사용 중인 포트가 있는지 확인할 수 있습니다.
분명히 여기에서 nginx가 사용하는 포트 80이 있고
브라우저에 외부 IP 주소를 입력합니다. 페이지에 내용이 있으면(보통 centos나 nginx 페이지) nginx가 성공적으로 시작되었다는 뜻입니다. 텍스트가 있습니다. 지침이 정확합니다.
e. 파일을 서버에 넣기
xshell을 클릭하여 새 파일을 전송하면 방금 다운로드한 xftp가 열립니다.
이제 오른쪽은 클라우드 서버의 바탕 화면입니다. 마우스 오른쪽 버튼을 클릭하여 새 웹 폴더를 만든 다음 내부에 새 html1 폴더를 만들고 여기에 dist 파일을 전송합니다.
로컬을 넣는 방법? 폴더의 빈 공간으로 끌어다 놓기만 하면 됩니다.
f. nginx 파일을 수정하고 nginx 서비스가 자체 html 파일을 프록시하도록 합니다.
먼저 기본 nginx 구성 파일 경로를 찾습니다: nginx -t
xftp에서 파일을 찾아 컴퓨터로 전송합니다(기본값은 데스크톱으로 전송).
vscode(vscode 없이 웹스톰 및 메모장도 사용 가능)를 사용하여 파일을 편집합니다. 주로 여기의 경로를 방금 업로드한 경로로 변경합니다.
그런 다음 서버의 nginx.conf 파일을 덮어씁니다(즉, 서버에 업로드하고 끌어다 놓습니다).
g. nginx 다시 시작(nginx는 nginx.conf 구성을 수정해야 하며 적용하려면 다시 시작해야 함)
xshell 열기: nginx -s reload를 입력하고 다시 시작합니다. 다시 시작한 후 응답이 없습니다. 정상입니다. 당황하지 마세요.
이때 브라우저를 사용하여 IP 주소를 엽니다. 자신의 웹 페이지가 표시되면 웹 페이지가 성공적으로 시작된 것입니다. 누구에게나 귀하의 ip를 보낼 수 있으며, 그들은 귀하의 웹 사이트를 방문할 수 있습니다.
