如何将Angular 7项目部署到Google Cloud [英] How to Deploy Angular 7 Project to Google Cloud
问题描述
我已经构建了一个Angular 7应用程序,当我从本地Mac或远程centos服务器执行ng serve
命令时,该应用程序可以很好地工作.
I have built an Angular 7 application that works nicely when I do the ng serve
command from my local mac or from a remote centos server.
此应用程序正在使用php
文件来访问均在我的Google云上提供的MySQL数据库.
This application is using php
files that access MySQL data base both served on my google cloud.
现在,在执行gcloud app deploy
之后,我在屏幕上看到的最后一件事是消息:
Now after doing the gcloud app deploy
the last thing I see on the screen is the message:
nebula@0.0.0开始/app ng服务
nebula@0.0.0 start /app ng serve
sh:1:ng:未找到
sh: 1: ng: not found
我死在水中
我尝试了很多不同版本的app.yaml
和cloudbuild.yaml
文件,以至于我什么都没学.
I have tried so many different versions of app.yaml
and cloudbuild.yaml
file that I feel like i have not learned anything.
我从最基本的英雄"应用开始尝试了同样的事情,并且遇到了同样的问题.
I have tried the same thing by starting with the very basic "Hero's" app and get the same issue.
即
ng new xxx cd xxx npm安装 ng服务
ng new xxx cd xxx npm install ng serve
然后我在浏览器中看到默认的Heros屏幕.
Then I see the default Heros screen in my browser.
然后我创建此app.yaml
文件
runtime: nodejs
env: flex
manual_scaling:
instances: 1
resources:
cpu: 1
memory_gb: 0.5
disk_size_gb: 10
service:
xxx
然后我尝试使用以下方式进行部署:
I then try to deploy using:
gcloud应用程序部署
gcloud app deploy
完成后,我收到消息
将服务[xxx]部署到[ https://xxx-dot-project.appspot.com ]
当我转到该网址时,我得到:
When I go to that url, I get:
错误:服务器错误
Error: Server Error
服务器遇到错误,无法完成您的请求. 请在30秒内重试.
The server encountered an error and could not complete your request. Please try again in 30 seconds.
此运行的日志文件为:
gcloud app logs tail -s xxx
Waiting for new log entries...
2019-05-04 15:27:35 xxx[20190504t102436] "GET / HTTP/1.1" 404
2019-05-04 15:27:35 xxx[20190504t102436] "GET /favicon.ico HTTP/1.1" 404
2019-05-04 15:28:56 xxx[20190504t102436] "GET / HTTP/1.1" 404
2019-05-04 15:32:45 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:32:50 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:33:06 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:33:10 xxx[prod] "GET /run HTTP/1.1" 404
2019-05-04 15:33:10 xxx[prod] "GET /favicon.ico HTTP/1.1" 404
2019-05-04 15:33:16 xxx[prod] "GET /run HTTP/1.1" 404
2019-05-04 15:33:16 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:33:19 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:33:19 xxx[prod] "GET /favicon.ico HTTP/1.1" 404
2019-05-04 15:40:43 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:40:46 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:40:50 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:40:50 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:40:53 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 16:01:50 xxx[20190504t105955] "GET / HTTP/1.1" 500
2019-05-04 16:01:51 xxx[20190504t105955] /bin/sh: 1: ng: not found
2019-05-04 16:06:19 xxx[20190504t105955] "GET / HTTP/1.1" 500
2019-05-04 16:06:20 xxx[20190504t105955] /bin/sh: 1: ng: not found
我的问题是,有人可以提供该应用程序在Google云中运行的过程的简单示例吗?
My question is can someone provide a trivial example of this process where the application runs in the google cloud?
推荐答案
You can deploy a SPA (like Angular) with an app.yaml
similar to this:
runtime: nodejs10
env_variables:
NODE_ENV: production
handlers:
- url: /
static_files: dist/my-project/index.html
upload: dist/my-project/index.html
- url: /
static_dir: dist/my-project
您需要事先使用ng build --prod
在本地构建角度项目,否则需要在package.json上设置predeploy
命令,该命令将由gcloud app deploy
调用(例如predeploy": "npm run lint && npm run build -- --prod --aot"
) .同样重要的是,您需要确保使用.gcloudignore
文件忽略dist
文件夹之外的所有文件.这样可以防止Google云上传这些文件.
You'd need to build locally your angular project beforehand with a ng build --prod
, otherwise you need to set a predeploy
command on your package.json, which will be called by gcloud app deploy
(e.g. predeploy": "npm run lint && npm run build -- --prod --aot"
). Also important, you need to make sure you ignore all files outside of dist
folder with .gcloudignore
file. This will prevent google cloud to upload those files.
# This file specifies files that are *not* uploaded to Google Cloud Platform
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
# $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore
# Node.js dependencies:
node_modules/
webpack.config.js
src/
tsconfig.json
readme.md
ssl/
tslint.json
LICENSE
.editorconfig
.dockerignore
.gitignore
https://github.com/mrdulin/angular-apollo-starter 包括所有这些文件
这篇关于如何将Angular 7项目部署到Google Cloud的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!