我已经从此处找到的角度通用模板开始构建了我的项目: universal-starter
我正在尝试将 ssr 版本部署为 azure Web 应用程序。我的代码位于 VSTS 上。
在我的本地计算机上,我可以运行以下命令:
npm 安装
npm run build:ssr
。这会生成 dist 文件夹。- 然后我可以将 dist 文件夹复制到其他位置并使用下面的命令运行
节点服务器.js
应用程序在本地计算机上的端口 4000 上启动。
按照上述步骤,我在 VSTS 上创建了一个包含以下任务的构建流程:
- 运行
npm install
的 npm 任务 - 运行
npm run build:ssr
的 npm 任务 - 具有以下配置的 Azure 应用服务部署任务:
- 包文件夹:dist/
- web.config 参数:-Handler iisnode -NodeStartFile server.js -appType 节点
上述进程成功运行,但是当我导航到 https://my-site-name.azurewebsites.net/时该网站无法访问。
如何在 Azure 上成功部署 Angular 5 SSR?
更新: 自此NodeJS-EmptySiteTemplate在 azure 上运行没有错误,我已根据该项目进行了以下更改:
- 该服务器正在监听 process.env.PORT | 8080
- 那里有一个 web.config 文件我丢失了。我将相同的 Web 配置文件放置在 wwwroot 中。
但我没有得到:“由于发生内部服务器错误,该页面无法显示。”
最佳答案
在花费了很多时间之后,我将扩展 Starians 的答案。虽然它最终帮助我让 azure 工作,但还是有一些信息丢失或不正确。 所以,我会尝试一步一步地走。
The first thing to note, is that I do not change any file to get this to work. If you change webpack.server.config.js then when you do a local
build:ssr
it will create server.js in your root application folder, which is undesirable.
因此,如果您使用的是azure视觉设计器,则可以按照以下步骤操作:
- 首先,连接到您的存储库并设置您要使用的分支
- 添加节点工具安装程序任务并将其设置为使用当前版本的节点
- 添加一个npm任务并将命令设置为自定义;将命令和参数设置为
install @angular/cli -g
(将其命名为“npm install angular cli”) - 添加另一个 npm 任务,但保持安装状态(将其命名为“npm install packages”)
- 添加命令行任务并将脚本设置为
npm run build:ssr
(将其命名为“构建项目”) - 添加复制文件任务,将源文件夹设置为
$(Build.SourcesDirectory)/dist
,内容 到**
,目标文件夹 到$(Build.ArtifactStagingDirectory)/app/dist
(将其命名为“Copy dist文件暂存” - 添加另一个复制文件任务,将源文件夹设置为
$(Build.ArtifactStagingDirectory)/app/dist
,内容到server.js
,目标文件夹到$(Build.ArtifactStagingDirectory)/app
(将其命名为“Copy server.js 到根目录”) - 然后添加删除文件任务,将源文件夹设置为
$(Build.ArtifactStagingDirectory)/app/dist
,并将>Contents 到server.js
(将其命名为“删除 dist/server.js” - 最后,添加 Azure App Service Deploy 任务,将包或文件夹设置为
$(Build.ArtifactStagingDirectory)/app
- 找到文件转换和变量替换选项,确保选择生成 Web.config 并添加以下Web.config 参数:
-Handler iisnode -NodeStartFile server.js -appType 节点
- 找到文件转换和变量替换选项,确保选择生成 Web.config 并添加以下Web.config 参数:
如果您正确遵循该指南,您最终应该得到类似于以下内容的文件夹结构:
web.config
server.js
dist
和 dist
文件夹应包含另外两个文件夹(浏览器和服务器)。
如果是这种情况(也应该是这样),您将拥有一个可用的 Angular Universal 应用程序。
对于那些想要的人,这里是 yml:
queue:
name: Hosted VS2017
demands: npm
steps:
- task: NodeTool@0
displayName: 'Use Node 8.x'
inputs:
versionSpec: 8.x
- task: Npm@1
displayName: 'npm install angular cli'
inputs:
command: custom
verbose: false
customCommand: 'install @angular/cli -g'
- task: Npm@1
displayName: 'npm install packages'
inputs:
verbose: false
- script: 'npm run build:ssr'
displayName: 'build the project'
- task: CopyFiles@2
displayName: 'Copy dist files to staging'
inputs:
SourceFolder: '$(Build.SourcesDirectory)/dist'
TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'
- task: CopyFiles@2
displayName: 'Copy server.js to the root'
inputs:
SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'
Contents: server.js
TargetFolder: '$(Build.ArtifactStagingDirectory)/app'
- task: DeleteFiles@1
displayName: 'Delete the dist/server.js'
inputs:
SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'
Contents: server.js
- task: AzureRmWebAppDeployment@3
displayName: 'Azure App Service Deploy: website'
inputs:
azureSubscription: 'Subscription 1'
WebAppName: website
DeployToSlotFlag: true
ResourceGroupName: Temp
SlotName: master
Package: '$(Build.ArtifactStagingDirectory)/app'
GenerateWebConfig: true
WebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType node'
UseWebDeploy: true
RemoveAdditionalFilesFlag: true
我希望这对其他人有帮助:)
关于azure - 部署 Angular 5 版本 :ssr on Azure,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49655828/