实操部署amis-admin

ljyfree

已于 2024-10-17 08:42:32 修改

阅读量1.2k

点赞数 18

分类专栏： Web 文章标签：前端 amis

于 2024-10-16 09:44:07 首次发布

本文链接：https://blog.youkuaiyun.com/ljyfree/article/details/142969410

版权

Web 专栏收录该内容

1 篇文章

订阅专栏

当需要做一个web服务的时候，前端的实现很令我头疼。搜了一圈前端低代码框架后，注意到百度贡献的amis，通过json来写前端，很酷啊。不得不说，一个好的demo项目，真的能让人迅速进入状态，比直接看文档要直观的多。

前期准备

clone amis-admin项目，可以从gitee上找个fork，下载速度快，例如 https://gitee.com/rocching/amis-admin
为了不影响其它项目，启动一个Ubuntu22.04的docker，将下载的项目挂载进去,将docker的3000端口映射为宿主机的3333端口，后续操作都在docker中进行

admin@my_pc:~/admin/amis_demo$ docker run -d --name amis_demo -p 3333:3000 --privileged -v ${PWD}:/root/amis_demo -v /sys/fs/cgroup:/sys/fs/cgroup:ro jrei/systemd-ubuntu:22.04
c14e1b652b7b7e89b48d1c28c7bd73418ce4de1e8948ee0bf9454bfe313f9180
admin@my_pc:~/admin/amis_demo$

apt更新后，安装必要的软件

admin@my_pc:~/admin/amis_demo$ docker exec -it amis_demo bash
root@c14e1b652b7b:/# cat /etc/issue
Ubuntu 22.04.5 LTS \n \l

root@c14e1b652b7b:/# 

root@c14e1b652b7b:/# apt install vim curl  wget git -y

node.js相关

amis是基于Vue二次开发的，因此需要安装node和vue
直接使用apt安装node，版本太低，改为使用nvm
首先下载并运行脚本安装nvm

root@c14e1b652b7b:/# curl -o- https://gitee.com/RubyMetric/nvm-cn/raw/main/install.sh | bash

source后确认nvm版本

root@c14e1b652b7b:/# source ~/.bashrc
root@c14e1b652b7b:/# 
root@c14e1b652b7b:/# nvm --version
0.39.5
root@c14e1b652b7b:/#

安装node 20版本

root@c14e1b652b7b:/# nvm install 20
Downloading and installing node v20.18.0...
Downloading https://nodejs.org/dist/v20.18.0/node-v20.18.0-linux-x64.tar.xz...
################################################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.18.0 (npm v10.8.2)
Creating default alias: default -> 20 (-> v20.18.0)
root@c14e1b652b7b:/# 

root@c14e1b652b7b:/# node -v
v20.18.0
root@c14e1b652b7b:/#

root@c14e1b652b7b:/# npm -v
10.8.2
root@c14e1b652b7b:/#

设置npm国内源

root@c14e1b652b7b:/# npm config set registry https://registry.npmmirror.com/
root@c14e1b652b7b:/# 
root@c14e1b652b7b:/# npm config get registry 
https://registry.npmmirror.com/
root@c14e1b652b7b:/#

全局安装vue/cli

root@c14e1b652b7b:/# npm install -g @vue/cli

root@c14e1b652b7b:/# vue -V
@vue/cli 5.0.8
root@c14e1b652b7b:/#

部署amis

安装指定package

在项目文件夹中，包含package.json,其中

root@c14e1b652b7b:~/amis_demo# cat package.json 
{
  "name": "amis-boilerplate",
  "version": "1.0.0",
  "description": "基于 amis 的项目模板",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "gh-pages": "rm -rf gh-pages && fis3 release gh-pages -c",
    "deploy-gh-pages": "git subtree push --prefix gh-pages origin gh-pages"
  },
  "keywords": [
    "amis",
    "boilerplate",
    "admin",
    "react"
  ],
  "author": "fex",
  "license": "MIT",
  "devDependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "morgan": "^1.10.0",
    "nodemon": "^2.0.7",
    "reload": "^3.1.1"
  }
}
root@c14e1b652b7b:~/amis_demo#

输入npm install，安装json文件中"devDependencies"所列的package

root@c14e1b652b7b:~/amis_demo# npm install

但是上述json中，没有把amis包含在内，那就手动安装一下

root@c14e1b652b7b:~/amis_demo# npm i amis

可以看到node_module中多了amis文件夹

root@c14e1b652b7b:~/amis_demo# ls -lt node_modules/amis
total 4116
drwxr-xr-x 4 root root    4096 Oct 15 10:12 sdk
drwxr-xr-x 3 root root     262 Oct 15 10:12 esm
drwxr-xr-x 4 root root     302 Oct 15 10:12 lib
-rw-r--r-- 1 root root 4194599 Oct 15 10:12 schema.json
-rw-r--r-- 1 root root    6580 Oct 15 10:12 package.json
-rw-r--r-- 1 root root     190 Oct 15 10:12 revision.json
drwxr-xr-x 3 root root      32 Oct 15 10:12 node_modules
root@c14e1b652b7b:~/amis_demo#

另外amis用到的页面，都在pages目录下，真的都是json啊

root@c14e1b652b7b:~/amis_demo# ls -lt pages/
total 52
-rw-rw-r-- 1 1003 1003   66 Oct 15 09:56 console.json
-rw-rw-r-- 1 1003 1003 7985 Oct 15 09:56 crud-advance.json
-rw-rw-r-- 1 1003 1003 1309 Oct 15 09:56 crud-edit.json
-rw-rw-r-- 1 1003 1003 3867 Oct 15 09:56 crud-list.json
-rw-rw-r-- 1 1003 1003 1387 Oct 15 09:56 crud-new.json
-rw-rw-r-- 1 1003 1003 1303 Oct 15 09:56 crud-view.json
-rw-rw-r-- 1 1003 1003  368 Oct 15 09:56 editor.json
-rw-rw-r-- 1 1003 1003 5809 Oct 15 09:56 form-basic.json
-rw-rw-r-- 1 1003 1003  202 Oct 15 09:56 jsonp.js
-rw-rw-r-- 1 1003 1003 3309 Oct 15 09:56 site.json
-rw-rw-r-- 1 1003 1003 2598 Oct 15 09:56 wizard.json
root@c14e1b652b7b:~/amis_demo#

直接运行

默认web服务监听3000端口，可以自行修改

root@c14e1b652b7b:~/amis_demo# cat server.js | grep PORT
app.set('port', process.env.PORT || 3000);
root@c14e1b652b7b:~/amis_demo#

运行

root@c14e1b652b7b:~/amis_demo# npm start

> amis-boilerplate@1.0.0 start
> node server.js

Web server listening on port http://localhost:3000

此时在宿主机上打开 http://<host_ip>:3333/,就可以看到呈现的效果了

资源本地化

查看index.html，可以看到引用的css和js还是cdn的地址，而且还是amis@3.2.0版本
下面的操作将它们本地化，不依赖于cdn
创建目录，按照index.html内容中的地址将js下载到本地

root@c14e1b652b7b:~/amis_demo# mkdir -p static/js
root@c14e1b652b7b:~/amis_demo# cd static/js
root@c14e1b652b7b:~/amis_demo/static/js# 
root@c14e1b652b7b:~/amis_demo/static/js# wget https://unpkg.com/vue@2
root@c14e1b652b7b:~/amis_demo/static/js# wget https://unpkg.com/history@4.10.1/umd/history.js
root@c14e1b652b7b:~/amis_demo/static/js# ls -lt
total 464
-rw-r--r-- 1 root root  33415 Oct 26  1985 history.js
-rw-r--r-- 1 root root 434871 Oct 26  1985 vue@2
root@c14e1b652b7b:~/amis_demo/static/js#

确认amis/sdk文件夹下面所需的文件都有

root@c14e1b652b7b:~/amis_demo# find node_modules/amis/sdk -name sdk.css
node_modules/amis/sdk/sdk.css
root@c14e1b652b7b:~/amis_demo# find node_modules/amis/sdk -name helper.css
node_modules/amis/sdk/helper.css
root@c14e1b652b7b:~/amis_demo# find node_modules/amis/sdk -name iconfont.css
node_modules/amis/sdk/iconfont.css
root@c14e1b652b7b:~/amis_demo# find node_modules/amis/sdk -name sdk.js
node_modules/amis/sdk/sdk.js
root@c14e1b652b7b:~/amis_demo#

修改server.js，设置路径缩写

root@c14e1b652b7b:~/amis_demo# diff -ruN server.js_bak server.js     
--- server.js_bak       2024-10-15 23:57:09.322313787 +0000
+++ server.js   2024-10-16 00:38:46.459088228 +0000
@@ -13,6 +13,9 @@
 
 app.use('/public', express.static('public'));
 app.use('/pages', express.static('pages'));
+app.use('/amis_sdk', express.static('node_modules/amis/sdk'));
+app.use('/sjs', express.static('static/js'));
+
 
 app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, 'index.html'));
root@c14e1b652b7b:~/amis_demo#

修改index.html，使用上面定义的缩写，改为本地路径

root@c14e1b652b7b:~/amis_demo# diff -ruN index.html_bak index.html 
--- index.html_bak      2024-10-15 23:58:36.175041017 +0000
+++ index.html  2024-10-16 00:39:32.999628248 +0000
@@ -12,17 +12,16 @@
     <link
       rel="stylesheet"
       title="default"
-      href="https://unpkg.com/amis@3.2.0/sdk/sdk.css"
+      href="/amis_sdk/sdk.css"
     />
-    <link rel="stylesheet" href="https://unpkg.com/amis@3.2.0/sdk/helper.css" />
+    <link rel="stylesheet" href="/amis_sdk/helper.css" />
     <link
       rel="stylesheet"
-      href="https://unpkg.com/amis@3.2.0/sdk/iconfont.css"
+      href="/amis_sdk/iconfont.css"
     />
-    <script src="https://unpkg.com/amis@3.2.0/sdk/sdk.js"></script>
-    <script src="https://unpkg.com/vue@2"></script>
-    <script src="https://unpkg.com/history@4.10.1
-/umd/history.js"></script>
+    <script src="/amis_sdk/sdk.js"></script>
+    <script src="/sjs/vue@2"></script>
+    <script src="/sjs/history.js"></script>
     <style>
       html,
       body,
root@c14e1b652b7b:~/amis_demo#