Публикация Vue.js + ASP.NET Core в Azure
Я хочу развернуть свое приложение ASP.NET Core + Vue.js в Службе приложений Azure с настроенной учетной записью CI/CD GitHub. Я следовал руководству Microsoft: https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022#publish-the-project
Я сделал все, как они сказали, но на этапе публикации при отправке репозитория на GitHub столкнулся с ошибкой:
> [email protected] build
vue-cli-service build
'vue-cli-service' is not recognized as an internal or external command,
operable program or batch file.
C:\Users\runneradmin.nuget\packages\microsoft.visualstudio.javascript.sdk\0.5.74-alpha\Sdk\Sdk.targets(171,9): error MSB3073: The command "npm run build" exited with code 1. [D:\a\ThatsTime\ThatsTime\vueapp\vueapp.esproj]
Error: Process completed with exit code 1.
вот содержимое vueapp.esproj:
<Project Sdk = "Microsoft.VisualStudio.JavaScript.Sdk/0.5.74-alpha">
<PropertyGroup>
<StartupCommand>npm run serve</StartupCommand>
<JavaScriptTestRoot>.\</JavaScriptTestRoot>
<JavaScriptTestFramework>Jest</JavaScriptTestFramework>
<!-- Command to run on project build -->
<BuildCommand></BuildCommand>
<!-- Command to create an optimized build of the project that's ready for publishing -->
<ProductionBuildCommand>npm run build</ProductionBuildCommand>
<!-- Folder where production build objects will be placed -->
<BuildOutputFolder>$(MSBuildProjectDirectory)\..\webapi\wwwroot</BuildOutputFolder>
</PropertyGroup>
</Project>
вот содержимое webapi.csproj:
<Project Sdk = "Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<EnableSdkContainerSupport>true</EnableSdkContainerSupport>
</PropertyGroup>
<ItemGroup>
<Folder Include = "Models\" />
</ItemGroup>
<ItemGroup>
<PackageReference Include = "Microsoft.AspNetCore.Authentication.JwtBearer" Version = "7.0.17" />
<PackageReference Include = "Microsoft.IdentityModel.Tokens" Version = "7.5.0" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include = "..\vueapp\vueapp.esproj">
<ReferenceOutputAssembly>false</ReferenceOutputAssembly>
</ProjectReference>
</ItemGroup>
</Project>
пакет.json:
"name": "vueapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "node aspnetcore-https.js && vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vueuse/components": "^10.9.0",
"@vueuse/core": "^10.9.0",
"core-js": "^3.8.3",
"jest": "^29.7.0",
"jest-editor-support": "^31.1.2",
"vue": "^3.2.13",
"vue-router": "^4.3.0"
}
Я также пытался выполнить развертывание с помощью веб-приложения и хранилища BLOB-объектов Azure, но ничего не вышло. Можете ли вы помочь мне решить проблему или, может быть, дать несколько рекомендаций, как развернуть это другим способом?
@Томас Как я могу это сделать? Писать ли мне эту команду в файле .yml или в чем-то еще?
@Osminogka, не могли бы вы убедиться, что ваш yml-файл рабочего процесса GitHub содержит эту строку или нет: - name: Install Vue CLI run: npm install -g @vue/cli
@JalpaPanchal github.com/Osminogka/ThatsTime вот мой репозиторий этого проекта на GitHub
я проверил файл yml, который находится по адресу .github/workflows/ThatsTime.yml. Я хотел бы предложить вам добавить эту строку кода - name: Install dependencies run: npm install - name: Install Vue CLI run: npm install -g @vue/cli перед строкой - name: Build.
@JalpaPanchal Как вы думаете, он автоматически обработает эту команду в правильном каталоге, где находится package.json?
@JalpaPanchal Не удалось установить зависимости с помощью команды «npm install». Сообщение об ошибке: npm ERR! путь D:\a\ThatsTime\ThatsTime/package.json npm ОШИБКА! ошибся -4058 нм ОШИБКА! enoent ENOENT: нет такого файла или каталога, откройте «D:\a\ThatsTime\ThatsTime\package.json» npm ERR! enoent Это связано с тем, что npm не может найти файл.
Вы получаете ту же ошибку локально?
@PravallikaKV Я могу опубликовать этот проект в локальной папке и разместить его на своем локальном сервере IIS, и он работает отлично
@Osminogka, я проверил твой репозиторий на GitHub. исходя из этого, вы могли бы добавить эту строку вместо непосредственного добавления команды установки: - имя: Установить зависимости Vue.js, запустить: рабочий каталог npm install: ${{ env.VUE_APP_DIR }} - имя: Запустить проект сборки Vue.js: Рабочий каталог npm run build: ${{ env.VUE_APP_DIR }}. Обязательно замените 'vueapp' фактическим путем к вашему приложению Vue.js. env: VUE_APP_DIR: 'vueapp' # Установите здесь каталог вашего приложения Vue
Ответы 1
«vue-cli-service» не распознается как внутренняя или внешняя команда, действующая программа или командный файл.
Чтобы устранить эту ошибку, вам необходимо установить зависимости @Thomas и @Jalpa Panchal, упомянутые в комментариях.
Сообщение об ошибке: npm ERR! путь D:\a\ThatsTime\ThatsTime/package.json npm ОШИБКА! ошибся -4058 нм ОШИБКА! enoent ENOENT: нет такого файла или каталога, откройте «D:\a\ThatsTime\ThatsTime\package.json»
Эта ошибка связана с тем, что рабочий процесс не может указать package.json в корневом каталоге, поскольку package.json находится в подпапке vueapp.
Чтобы устранить эту ошибку, добавьте следующую конфигурацию в рабочий процесс:
- name : Install Dependencies
run : |
cd vueapp
npm install
Рабочий процесс GitHub:
name: Build and deploy ASP.Net Core app to Azure Web App - vueaspnet
on:
push:
branches:
- main
workflow_dispatch:
jobs:
build:
runs-on: windows-latest
steps:
- uses: actions/checkout@v4
- name: Set up .NET Core
uses: actions/setup-dotnet@v1
with:
dotnet-version: '7.x'
include-prerelease: true
- name: Install Dependencies
run : |
cd vueapp
npm install
- name: Build with dotnet
run: dotnet build --configuration Release
- name: dotnet publish
run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp
- name: Upload artifact for deployment job
uses: actions/upload-artifact@v3
with:
name: .net-app
path: ${{env.DOTNET_ROOT}}/myapp
deploy:
runs-on: windows-latest
needs: build
environment:
name: 'Production'
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
steps:
- name: Download artifact from build job
uses: actions/download-artifact@v3
with:
name: .net-app
- name: Deploy to Azure Web App
id: deploy-to-webapp
uses: azure/webapps-deploy@v2
with:
app-name: 'vueaspnet'
slot-name: 'Production'
package: .
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_D9811244A05F468CBA7E827C65C83215 }}
Спасибо, все зависимости успешно установлены. Однако сейчас я столкнулся с другой проблемой. Не могли бы вы помочь мне с настройкой сертификата HTTPS для соединения между Vue.js и ASP.NET? Я сталкиваюсь с ошибкой, которая гласит: «Ошибка: ENOENT: нет такого файла или каталога, откройте «C:\Users\runneradmin\AppData\Roaming\ASP.NET\https\vueapp.key»
вам либо не хватает «установки npm», либо vue и @vue/cli в качестве зависимостей. Я бы, наверное, запустил
npm install -g vueиnpm install -g @vue/cliв отдельной задаче сценария перед публикацией.