# huaweicloud-solution-nft-platform-frontend

**Repository Path**: HuaweiCloudDeveloper/huaweicloud-solution-nft-platform-frontend

## Basic Information

- **Project Name**: huaweicloud-solution-nft-platform-frontend
- **Description**: 本项目是NFT管理平台的前端，主要实现业务界面。 提供NFT场景下数字藏品上架、获取、查询功能，基于华为云区块链引擎，可实现数字资产的确权、可信保存。

- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master-dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2022-08-01
- **Last Updated**: 2023-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 概述
- 项目描述：huaweicloud-solution-nft-platform-frontend
项目是 NFT 管理平台的前端，主要实现业务界面。 提供 NFT 场景下数字藏品上架、获取、查询功能，基于华为云区块链引擎，可实现数字资产的确权、可信保存。
- 开发框架：Angular
# 工具
- VSCode，Angular CLI，终端，Git
# 组织结构
```json
├── angular.json --项目配置文件
├── karma.conf.js --单元测试的执行器配置文件
├── package.json --npm 工具的配置文件
├── proxy.config.json --项目运行配置
├── README.md --说明文件
├── src
| ├── app --包含应用的组件和模块
| ├── assets --静态文件
| ├── config --用户配置
| ├── environments --环境配置
| ├── favicon.ico --页签小图标
| ├── index.html --整个应用的根 html
| ├── main.ts --整个项目的入口点
| ├── polyfills.ts --用来导入一些必要库
| ├── styles.scss --公用样式
| └── test.ts -- 自动化测试配置
├── tsconfig.app.json
├── tsconfig.json --ts 配置文件
├── tsconfig.spec.json  
└── tslint.json --tslint 的配置文件，用来定义 TypeScript 代码质量检查的规则
```
# 运行要求
- npm版本6.14.8及以上
- Angular 14.15.5及以上
- node 14.15.5及以上

# 本地运行流程
1. 运行 npm install -g @angular/cli 命令，Angular CLI可用于初始化、开发、构建和维护Angular应用
    ```
    npm install -g @angular/cli
2. 在根目录下运行 npm install 命令，安装 Angular 项目需要的所有东西
    ```
    npm install
3. 在根目录下运行 npm start 命令，运行项目
    ```
    npm start
    ```

# 部署流程
1. 在本地根目录下运行 ng build 命令，将Angular应用编译到给定输出路径处名为dist/的输出目录中。
    ```
    ng build
2. 准备一台远程服务器，用以放置后端程序，以及前端与后端信息交互。
3. 根据以下配置指南在服务器上配置 Nginx。
4. 把输出目录dist/的每个文件都复制到nginx默认网站根目录下。

### nginx配置指南

```
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    upstream nftservers {
	    server 127.0.0.1:8080; #后端服务器地址可以添加多个 
    }
    server {
        listen       80;
        server_name  localhost;
        gzip on;  #是否开启gzip模块 on表示开启 off表示关闭
        gzip_buffers 4 16k;  #设置压缩所需要的缓冲区大小
        gzip_comp_level 6;  #压缩级别1-9，数字越大压缩的越好，也越占用CPU时间
        gzip_min_length 100k;  #设置允许压缩的最小字节
        gzip_http_version 1.1;  #设置压缩http协议的版本,默认是1.1
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;  #设置压缩的文件类型
        gzip_vary on;  #加上http头信息Vary: Accept-Encoding给后端代理服务器识别是否启用 gzip 压缩
        add_header Access-Control-Allow-Methods *; #   指定允许跨域的方法，*代表所有
        #   预检命令的缓存，如果不缓存每次会发送两次请求
        add_header Access-Control-Max-Age 3600;
        #   带cookie请求需要加上这个字段，并设置为true
        add_header Access-Control-Allow-Credentials true;

        #   表示允许这个域跨域调用（客户端发送请求的域名和端口）
        #   $http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
        add_header Access-Control-Allow-Origin $http_origin;

        #   表示请求头的字段 动态获取
        add_header Access-Control-Allow-Headers
        $http_access_control_request_headers;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header x-requested-with XMLHttpRequest;

        if ($request_method = OPTIONS){
            return 200;
        }
        location ^~ / {
            root  html;
            index  index.html index.htm;
            try_files $uri $uri/  /index.html;
            #/data01/nginx/html/dist/index.html;

            if ($request_filename ~* .*/.(?:htm|html|md)$) {
                add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
            }

            if ($request_filename ~* .*/.(?:js|css)$) {
                expires      7d;
            }

            if ($request_filename ~* .*/.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|ico)$) {
                expires      7d;
            }
        }
        location /v1/ {
            proxy_pass   http://nftservers;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
```