如何使用Firebase托管部署Angular 2 App?
我想知道使用Firebase托管部署简单的Angular 2应用程序所需的步骤.
I want to know the steps necessary to deploy a simple Angular 2 Application using Firebase-hosting.
以下是这些步骤:
1) npm install -g firebase-tools
这将安装将在以下步骤中使用的firebase CLI.
This will install firebase CLI that we will use in the following steps.
Firebase CLI要求Node.js版本为0.10.0或更高版本.
Firebase CLI requires Node.js version 0.10.0 or greater.
2) firebase init
项目设置
这将触发Firebase项目设置,并将所有设置存储在本地文件firebase.json
中.
This will trigger Firebase project setup and store all settings in a local file firebase.json
.
-
?您要为此文件夹设置哪些Firebase CLI功能?确保已选中[托管:配置和部署Firebase托管站点],然后按INTRO.
? What Firebase CLI features do you want to setup for this folder? Make sure [Hosting: Configure and deploy Firebase Hosting sites] is checked and press INTRO.
?您要默认关联哪个Firebase项目?选择[创建新项目]
? What Firebase project do you want to associate as default? Choose [create a new project]
托管设置
- ?您想将什么用作公用目录? 您需要为Angular 2应用程序选择(build)文件夹.默认值为(公共).
- ?配置为单页应用程序(将所有URL重写为/index.html)?回答是.
- ? What do you want to use as your public directory? You need to choose the (build) folder for your Angular 2 Application. Default is (public).
- ? Configure as a single-page app (rewrite all urls to /index.html)? Answer Yes.
注意:此文件夹下的所有内容都将用作静态资产.
Note: anything under this folder will be served as static assets.
4) You need to go to (https://console.firebase.google.com) to create a new Project.
-
单击(创建新项目).
-
Click on (CREATE NEW PROJECT).
为您的项目选择一个很酷的名称,然后选择一个国家/地区.例如:英国.
Pick up a cool name for your project and select a Country/region. Eg: United Kingdom.
您的项目名称将类似于
cool-f5b0d
.Your project name will look something like
cool-f5b0d
.5) firebase use --add
拾取刚刚创建的项目.
Pick up the project you just created.
-
?您要添加哪个项目?选择您创建的新项目.
? Which project do you want to add? Choose the new project you created.
?您要为此项目使用什么别名?您可以使用别名以方便参考
? What alias do you want to use for this project? You can use an alias for easy reference
6) firebase deploy
这将部署在步骤2中设置的资产文件夹.请确保该文件夹与Angular 2应用程序的(构建)文件夹匹配.
This will deploy your asset folder set up during step 2. Make sure this matches the (build) folder for your Angular 2 Application.
-
-