Angular 프로젝트를 시작하는 방법은 무엇입니까? nginx를 이용한 온라인 프로세스에 대해 이야기해 봅시다!

Angular 프로젝트를 시작하는 방법은 무엇인가요? 다음 글에서는 nginx와 결합된 Angular 프로젝트의 출시 과정에 대해 설명하겠습니다. 모든 분들께 도움이 되기를 바랍니다.

angular 프로젝트를 완료한 후 어떻게 온라인에 접속해야 하나요? [관련 튜토리얼 추천: "angular 项目之后，你应该如何上线呢？【相关教程推荐：《angular教程》】

也许你会回答：

It is not my bussiness. Right?

确实，一个纯前端开发者，在完成了项目的开发之后，剩下的事情，你不用再接触接下来的上线内容。

但是，作为一个开发者，我们了解项目从开发到上线的流程是一件很重要的事情。

我们结合 nginx 来讲解一下。

react 和 vue 同理

打包项目

这里使用的是 angular-cli 生成的项目。开发完项目，你只要运行 npm run build 即可。builder 会根据你在 angular.json 中预设的打包内容进行输出。

• outputPath: 打包后的存放的文件夹路径
• index: 挂载模版文件
• main: 项目的主入口文件
• ...

完成之后，你可以通过 outputPath 查看到打包后的文件。

安装 Nginx

我们在要部署代码的机器上，即服务器，安装 Nginx。操作基于 centos 的 yum 源操作。

# 安装nginx
yum -y install nginx

# 查看版本
nginx -v

# 启动nginx
systemctl start nginx.service

# 访问 默认是80端口
your_ip:80

配置Nginx

查看 Nginx 的配置文件 nginx.conf。

使用 whereis nginx 进行查找 nginx 安装的位置

在 /etc/nginx/conf.d 文件夹中添加文件新的配置文件，比如 demo.conf，并配置服务端的接口地址和前端的入口文件路径等：

upstream api {
  server 127.0.0.1:8888; // 服务端
  keepalive 2000;
}

server {
  listen       [::]:80 default_server;
  server_name  _;
  root         /usr/share/nginx/demo-frontend/dist/demo-web; // 前端资源位置
  location / {
    add_header Access-Control-Allow-Origin *;
  }

  location /api { // api 处理
    proxy_pass http://api;
  }

}


# Settings for a TLS enabled server.

#     server {

#         listen       443 ssl http2 default_server;
#         listen       [::]:443 ssl http2 default_server;
#         server_name  _;
#         root         /usr/share/nginx/frontend/demo.com/dist;


#         ssl_certificate "/root/ssh/nginx/1_demo.com_bundle.crt";
#         ssl_certificate_key "/root/ssh/nginx/2_demo.com.key";
#         ssl_session_cache shared:SSL:1m;
#         ssl_session_timeout  10m;
#         ssl_ciphers HIGH:!aNULL:!MD5;
#         ssl_prefer_server_ciphers on;

#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#.         add_header Access-Control-Allow-Origin *;
#        }


# to api restful service
#       location /api {
#         proxy_pass http://api;
#       }

#        error_page 404 /404.html;
#        location = /404.html {
#        }


#        error_page 500 502 503 504 /50x.html;
#        location = /50x.html {
#        }
#     }

代码注释部分 TLS 是传输加密协议 https，需要添加相应的证书。

在上面的代码中，我们将前端的静态资源存放在 /usr/share/nginx/frontend/demo.com/dist/ 下，那么我们将打包出来的 dist/** 下的内容上传到这个目录文件就行。

/usr/share/nginx/frontend/demo.com/dist/ 其实就是指向了 index.html 入口文件。

一种比较简单的上传方案就是在用户本机直接执行：rsync -avzh 服务器用户名@62.**1.**.**:/usr/share/nginx/frontend/demo.com/dist/ /dist项目下的index.html及其同级的内容。将打包的内容同步到远程的服务器相应位置。之后重启 nginx，即 nginx -s reloadangular tutorial

"]

아마도 이렇게 대답하실 겁니다:

이건 내 사업이 아니지?사실 순수 프론트엔드 개발자로서 프로젝트 개발을 마친 후, 다음으로 다음 온라인 콘텐츠를 터치할 필요가 없습니다.

그러나 개발자로서 개발부터 출시까지 프로젝트 프로세스를 이해하는 것은 매우 중요합니다.

nginx와 연계하여 설명하겠습니다.

• 반응 및 vue에도 동일하게 적용됩니다
패키징 프로젝트
여기에서는 angular-cli로 생성된 프로젝트가 사용됩니다. 프로젝트를 개발한 후에는 npm run build만 실행하면 됩니다. builder는 angular.json에 미리 설정된 패키징 콘텐츠에 따라 출력합니다.

• 
outputPath: 패키지된 저장 폴더 경로

• index: 템플릿 파일 마운트

main: 프로젝트의 메인 항목 파일

...

완료 후 outputPath를 전달할 수 있습니다. 패키지된 파일을 봅니다.

Install Nginx

코드를 배포하려는 머신, 즉 서버에 Nginx를 설치합니다. 작업은 centos의 yum 소스 작업을 기반으로 합니다. rrreee

🎜🎜Nginx 구성🎜🎜🎜🎜 Nginx의 nginx.conf 구성 파일을 확인하세요. 🎜🎜🎜whereis nginx를 사용하여 nginx가 설치된 위치를 찾으세요. 🎜🎜🎜/etc/nginx/conf.d에 파일을 추가하세요 폴더 demo.conf와 같은 새 구성 파일, 서버 인터페이스 주소 및 프런트엔드 항목 파일 경로 등을 구성합니다. 🎜rrreee🎜🎜코드 주석 부분 TLS는 전송 암호화 프로토콜입니다. code>https인 경우 해당 인증서를 추가해야 합니다. 🎜🎜🎜위 코드에서는 프런트엔드 정적 리소스를 /usr/share/nginx/frontend/demo.com/dist/에 저장한 다음 를 패키징합니다. 그냥 업로드하세요. dist/** 아래의 콘텐츠를 이 디렉터리 파일에 복사합니다. 🎜🎜🎜/usr/share/nginx/frontend/demo.com/dist/는 실제로 index.html 항목 파일을 가리킵니다. 🎜🎜🎜비교적 간단한 업로드 솔루션은 사용자 컴퓨터에서 직접 실행하는 것입니다: rsync -avzh server username@62.**1.**.**:/usr/share/nginx/frontend/demo . com/dist//index.html 및 /dist 프로젝트 아래의 해당 콘텐츠. 패키지된 콘텐츠를 원격 서버의 해당 위치에 동기화합니다. 그런 다음 nginx, 즉 nginx -s reload를 다시 시작하면 완료됩니다. ㅋㅋㅋ 🎜 🎜🎜🎜전면용 nginx -end content 프로세스 🎜🎜🎜🎜 서버의 지정된 위치에 각도 패키지 파일을 업로드합니다 🎜🎜🎜🎜🎜 물론 관련 도메인 이름, 파일링, 관련 인증서 등도 사전에 신청해야 합니다 🎜🎜 🎜아이디어는 정말 간단합니다. 물론, 전문적인 일은 운영 및 유지보수 동료들에게 맡겨야 하니 너무 바쁘지 마세요~🎜🎜🎜원본주소 : https://juejin.cn/post/7087417501486678030🎜🎜저자 : Jimmy🎜🎜🎜더 많은 프로그래밍을 원하시면- 관련 지식이 있으면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 Angular 프로젝트를 시작하는 방법은 무엇입니까? nginx를 이용한 온라인 프로세스에 대해 이야기해 봅시다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!