将MEAN应用分发文件夹部署到Azure Web App

时间:2019-03-12 12:07:42

标签: express angular7 azure-web-app-service meanjs azure-webapps

部署MEAN应用时,使用dist文件夹是否错误?

到目前为止我已经采取的步骤:

  1. 使用tutorial series by Codevolution成功创建了一个名为ngApp的简单工作MEAN应用。 Angular自动创建了一个文件夹dist/ngApp
  2. 在VSCode上安装了Azure应用服务扩展。
  3. 右键单击,浏览到dist/ngApp,然后直接部署文件,而无需web.config或任何其他内容。
  4. 问题1 :导航到https://asdjkna.azurewebsites.net/很好(链接重定向到https://asdjkna.azurewebsites.net/home,我打算使用app-routing.module.ts)。但是,刷新后,出现了404错误。

app-routing.module.ts中的部分代码:

const routes: Routes = [
  {path: '', redirectTo:'/home', pathMatch:'full'},
  {path: 'home', component: HomeComponent},
  {path: 'videos', component: VideoCenterComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. 问题2 :再次导航至https://asdjkna.azurewebsites.net/。单击导航栏上的播放列表选项卡。 Chrome的F12控制台显示也找不到https://asdjkna.azurewebsites.net/api/videos。这意味着不仅我的Angular路由有问题,我的Express路由也有问题。

/server.js中的部分代码:

const api = require('./server/routes/api');
app.use('/api',api);

const port = process.env.PORT || 3000;

const app = express();
app.use(express.static(path.join(__dirname, 'dist/ngApp')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/ngApp/index.html'));
});

./server/routes/api中的部分代码:

const Video = require('../models/video');

// GET request
router.get('/videos', function(req, res){
    console.log('GET request for all videos');
    Video.find({})
    .exec(function(err,videos)
    {
        if(err){
            console.log("Error retrieving videos.");
        }else {
            res.json(videos);
        }
    });
});

直接部署dist/ngApp文件夹也许是错误的?也许在我部署到Web App时,我的路由方式不正确?在localhost上进行测试没有这些问题。

我已完整记录了本教程系列,并在需要时can be accessed here做了说明。

0 个答案:

没有答案