angular+Mongodb+阿里云windows服务器部署方案

angular+Mongodb+阿里云windows服务器部署方案

一、开通阿里云服务器

1. 设置安全组

2. 配置规则

3. 加入安全组

4. 远程连接

下载rdp配置

导入配置并连接

打开后找到刚刚下载的文件

连接成功！

5. 设置永不熄屏幕

6. 其他方案

如果不行，可以使用阿里云的VNC进行连接，同样需要永不熄屏幕

二、配置环境

1. 关闭防火墙

暴力一点，关闭防火墙避免别人不能访问

2. 安装node

打开下载文件夹

双击安装

一路next即可

3. 安装angular/cli

右键 然后左键

检查npm

npm -v

安装angular/cli

npm install -g @angular/cli

检查是否安装成功

ng version

有输入就直接y然后回车

4. 安装deployd和mongodb

安装deployd

npm install deployd-cli -g

测试

dpd -V

安装mongodb

软件下载

https://www.mongodb.com/try/download/community

一路next

这里custom就可以，完整太慢了

三、启动项目

1. 拷贝代码

把项目的代码压缩，然后用远程桌面连接拷贝到服务器上。

2. 启动mongoddb

首先cd到数据目录中，执行

mongod --dbpath=data

3. 启动dpd

重新打开一个powershell，进入数据目录

dpd --host 127.0.0.1 -d

4. 启动项目

再打开一个powershell ，进入项目目录

ng serve

此处仅为特殊项目，已经提前在本地用dpd 生成了数据文件夹

且数据目录是项目目录的下层。

此处本地可以查看，但是外网别人依旧无法查看

5. 打包到nginx

下载nginx

nginx: download

解压缩到桌面

开始nginx

验证nginx成功

修改项目

修改资源加载路径

修改url路径避免无法访问

修改nginx模式避免出现路由404

app.module.ts

// app.module.ts
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
  providers:[{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
    }
  ],
  ……
})

打包项目

切换路径到项目路径

ng build

来到路径下的dist文件夹

替换nginx原首页，复制index，改为50x.html

来到nginx/html下进行黏贴，替换掉原有的index.html

然后删除50x.html，复制一个index，更名为50x.html

6. 尝试访问

成功~~

测试添加

刷新网页

测试通过，成功!!!