Preamble
Sometimes we need a simple web server, public to the internet to perform some miscellaneous tasks, or to host some files when needed. However, as a “poor” dev/pentester, having a visa card to register for free cloud of Google, AWS, Oracle is sometimes a big problem. Just kidding, in this article I will introduce Deta – a tool that allows you to quickly create a micro-website/API and publish it to the internet. Here we go~
Deta
https://deta.sh is a free personal Cloud tool that allows us to build applications, prototypes and then publish to the internet quickly.
Deta comes with:
- Deta Base : NoSQL database (same as MongoDB)
- Deta Micros : Allows you to deploy your application to the internet (like Heroku). Deta lets you create as many micros as you want
- Deta Drive : Allows file storage (same as Google Drive and AWS S3)
Deta currently supports the following languages: Python , Node.js , and Golang . For each language, Deta also supports micro-frameworks such as Python’s FastAPI or Flask .
As an example, I will build a simple application for pentester as follows:
- Allows uploading files by arbitrary URL and MIME Type. For example: access the link: ” https://myfakeserver.com/aaa.png ” but return the content as
alert(origin)
and the mime type is javascript (not an image file like PNG). - Let the user directly fill in the file content.
- Allows deleting files.
Setting
All user manuals (complete and detailed) are available at https://docs.deta.sh/docs/home
First of all, we need to register an account. The management screen is located at: https://web.deta.sh/home
Then we download the Deta CLI
and log in:
1 2 3 | <span class="token function">curl</span> -fsSL https://get.deta.dev/cli.sh <span class="token operator">|</span> <span class="token function">sh</span> deta login |
then create a new micro with python framework:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | deta new payload-server --python Successfully created a new micro <span class="token punctuation">{</span> <span class="token string">"name"</span> <span class="token builtin class-name">:</span> <span class="token string">"payload-server"</span> , <span class="token string">"id"</span> <span class="token builtin class-name">:</span> <span class="token string">"xxxxxx"</span> , <span class="token string">"project"</span> <span class="token builtin class-name">:</span> <span class="token string">"xxxxxxx"</span> , <span class="token string">"runtime"</span> <span class="token builtin class-name">:</span> <span class="token string">"python3.9"</span> , <span class="token string">"endpoint"</span> <span class="token builtin class-name">:</span> <span class="token string">"https://xxxxxxx.deta.dev"</span> , <span class="token string">"region"</span> <span class="token builtin class-name">:</span> <span class="token string">"ap-southeast-1"</span> , <span class="token string">"visor"</span> <span class="token builtin class-name">:</span> <span class="token string">"disabled"</span> , <span class="token string">"http_auth"</span> <span class="token builtin class-name">:</span> <span class="token string">"disabled"</span> <span class="token punctuation">}</span> |
Check out the newly created file:
1 2 3 4 | ➜ payload-server <span class="token function">cat</span> main.py def app <span class="token punctuation">(</span> event <span class="token punctuation">)</span> : <span class="token builtin class-name">return</span> <span class="token string">"Hello, world!"</span> % |
Right at this step we can run deta deploy
and our app will be deployed to the URL above. Too fast too dangerous:
We can also install additional libraries, create a requirements.txt
file and enter the names of the libraries, here we will need Flask and Deta.
1 2 3 | flask deta |
Every time you fix the code, remember to
deta deploy
to push the code up
Backend
Modify the main.py
file as follows, because the code is also quite short with 88 lines and simple, so I will not go into each step but just explain some important positions.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | <span class="token keyword">from</span> flask <span class="token keyword">import</span> Flask <span class="token keyword">from</span> flask <span class="token keyword">import</span> Flask <span class="token punctuation">,</span> request <span class="token punctuation">,</span> render_template <span class="token punctuation">,</span> abort <span class="token punctuation">,</span> Response <span class="token punctuation">,</span> flash <span class="token punctuation">,</span> redirect <span class="token keyword">from</span> deta <span class="token keyword">import</span> Deta <span class="token keyword">import</span> uuid app <span class="token operator">=</span> Flask <span class="token punctuation">(</span> __name__ <span class="token punctuation">)</span> app <span class="token punctuation">.</span> secret_key <span class="token operator">=</span> <span class="token string">b'somethingrandom'</span> deta <span class="token operator">=</span> Deta <span class="token punctuation">(</span> <span class="token string">"PROJECT_KEY_HERE"</span> <span class="token punctuation">)</span> drive <span class="token operator">=</span> deta <span class="token punctuation">.</span> Drive <span class="token punctuation">(</span> <span class="token string">"files"</span> <span class="token punctuation">)</span> db <span class="token operator">=</span> deta <span class="token punctuation">.</span> Base <span class="token punctuation">(</span> <span class="token string">"payload_db"</span> <span class="token punctuation">)</span> <span class="token decorator annotation punctuation">@app <span class="token punctuation">.</span> route</span> <span class="token punctuation">(</span> <span class="token string">"/"</span> <span class="token punctuation">,</span> defaults <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">"path"</span> <span class="token punctuation">:</span> <span class="token string">""</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> methods <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"GET"</span> <span class="token punctuation">,</span> <span class="token string">"POST"</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token decorator annotation punctuation">@app <span class="token punctuation">.</span> route</span> <span class="token punctuation">(</span> <span class="token string">"/<path:path>"</span> <span class="token punctuation">)</span> <span class="token keyword">def</span> <span class="token function">catch_all</span> <span class="token punctuation">(</span> path <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">if</span> path <span class="token operator">==</span> <span class="token string">""</span> <span class="token punctuation">:</span> <span class="token keyword">if</span> request <span class="token punctuation">.</span> method <span class="token operator">==</span> <span class="token string">'POST'</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> upload <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">else</span> <span class="token punctuation">:</span> res <span class="token operator">=</span> db <span class="token punctuation">.</span> fetch <span class="token punctuation">(</span> <span class="token punctuation">)</span> all_items <span class="token operator">=</span> res <span class="token punctuation">.</span> items <span class="token keyword">return</span> render_template <span class="token punctuation">(</span> <span class="token string">"index.html"</span> <span class="token punctuation">,</span> items <span class="token operator">=</span> all_items <span class="token punctuation">)</span> <span class="token keyword">elif</span> path <span class="token operator">==</span> <span class="token string">"delete"</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> delete <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">else</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> download <span class="token punctuation">(</span> path <span class="token punctuation">)</span> <span class="token keyword">def</span> <span class="token function">upload</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token builtin">file</span> <span class="token operator">=</span> request <span class="token punctuation">.</span> files <span class="token punctuation">.</span> get <span class="token punctuation">(</span> <span class="token string">"file"</span> <span class="token punctuation">)</span> submitted_mime <span class="token operator">=</span> request <span class="token punctuation">.</span> form <span class="token punctuation">.</span> get <span class="token punctuation">(</span> <span class="token string">"mime"</span> <span class="token punctuation">)</span> submitted_path <span class="token operator">=</span> request <span class="token punctuation">.</span> form <span class="token punctuation">.</span> get <span class="token punctuation">(</span> <span class="token string">"path"</span> <span class="token punctuation">)</span> content <span class="token operator">=</span> request <span class="token punctuation">.</span> form <span class="token punctuation">.</span> get <span class="token punctuation">(</span> <span class="token string">"content"</span> <span class="token punctuation">)</span> mime <span class="token operator">=</span> <span class="token string">"text/plain"</span> <span class="token keyword">if</span> submitted_mime <span class="token punctuation">:</span> mime <span class="token operator">=</span> submitted_mime <span class="token keyword">if</span> <span class="token builtin">file</span> <span class="token punctuation">:</span> mime <span class="token operator">=</span> <span class="token builtin">file</span> <span class="token punctuation">.</span> content_type content <span class="token operator">=</span> <span class="token builtin">file</span> <span class="token keyword">elif</span> <span class="token keyword">not</span> content <span class="token punctuation">:</span> flash <span class="token punctuation">(</span> <span class="token string">"[ERROR] No content!"</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> redirect <span class="token punctuation">(</span> <span class="token string">"/"</span> <span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token keyword">not</span> submitted_path <span class="token punctuation">:</span> flash <span class="token punctuation">(</span> <span class="token string">"[ERROR] No path!"</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> redirect <span class="token punctuation">(</span> <span class="token string">"/"</span> <span class="token punctuation">)</span> <span class="token keyword">if</span> db <span class="token punctuation">.</span> fetch <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token string">"path"</span> <span class="token punctuation">:</span> submitted_path <span class="token punctuation">}</span> <span class="token punctuation">,</span> limit <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> items <span class="token punctuation">:</span> flash <span class="token punctuation">(</span> <span class="token string">"[ERROR] Duplicate path!"</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> redirect <span class="token punctuation">(</span> <span class="token string">"/"</span> <span class="token punctuation">)</span> filename <span class="token operator">=</span> <span class="token builtin">str</span> <span class="token punctuation">(</span> uuid <span class="token punctuation">.</span> uuid4 <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> db <span class="token punctuation">.</span> put <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token string">"path"</span> <span class="token punctuation">:</span> submitted_path <span class="token punctuation">,</span> <span class="token string">"filename"</span> <span class="token punctuation">:</span> filename <span class="token punctuation">,</span> <span class="token string">"mime"</span> <span class="token punctuation">:</span> mime <span class="token punctuation">}</span> <span class="token punctuation">)</span> res <span class="token operator">=</span> drive <span class="token punctuation">.</span> put <span class="token punctuation">(</span> filename <span class="token punctuation">,</span> content <span class="token punctuation">,</span> content_type <span class="token operator">=</span> mime <span class="token punctuation">)</span> <span class="token keyword">if</span> res <span class="token punctuation">:</span> flash <span class="token punctuation">(</span> <span class="token string-interpolation"><span class="token string">f"[OK] file uploaded to path: </span><span class="token interpolation"><span class="token punctuation">{</span> submitted_path <span class="token punctuation">}</span></span> <span class="token string">"</span></span> <span class="token punctuation">)</span> <span class="token keyword">return</span> redirect <span class="token punctuation">(</span> <span class="token string">"/"</span> <span class="token punctuation">)</span> <span class="token keyword">def</span> <span class="token function">download</span> <span class="token punctuation">(</span> path <span class="token punctuation">)</span> <span class="token punctuation">:</span> items <span class="token operator">=</span> db <span class="token punctuation">.</span> fetch <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token string">"path"</span> <span class="token punctuation">:</span> path <span class="token punctuation">}</span> <span class="token punctuation">,</span> limit <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> items <span class="token keyword">if</span> items <span class="token punctuation">:</span> <span class="token builtin">file</span> <span class="token operator">=</span> drive <span class="token punctuation">.</span> get <span class="token punctuation">(</span> items <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">[</span> <span class="token string">'filename'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> content <span class="token operator">=</span> <span class="token builtin">file</span> <span class="token punctuation">.</span> read <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token builtin">file</span> <span class="token punctuation">.</span> close <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> Response <span class="token punctuation">(</span> content <span class="token punctuation">,</span> mimetype <span class="token operator">=</span> items <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">[</span> <span class="token string">'mime'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token keyword">else</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> abort <span class="token punctuation">(</span> <span class="token number">404</span> <span class="token punctuation">)</span> <span class="token keyword">def</span> <span class="token function">delete</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> path <span class="token operator">=</span> request <span class="token punctuation">.</span> args <span class="token punctuation">.</span> get <span class="token punctuation">(</span> <span class="token string">"p"</span> <span class="token punctuation">)</span> items <span class="token operator">=</span> db <span class="token punctuation">.</span> fetch <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token string">"path"</span> <span class="token punctuation">:</span> path <span class="token punctuation">}</span> <span class="token punctuation">,</span> limit <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> items <span class="token keyword">if</span> items <span class="token punctuation">:</span> db <span class="token punctuation">.</span> delete <span class="token punctuation">(</span> items <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">[</span> <span class="token string">'key'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> drive <span class="token punctuation">.</span> delete <span class="token punctuation">(</span> items <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">[</span> <span class="token string">'filename'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> flash <span class="token punctuation">(</span> <span class="token string-interpolation"><span class="token string">f"[OK] path '</span> <span class="token interpolation"><span class="token punctuation">{</span> path <span class="token punctuation">}</span></span> <span class="token string">' deleted!"</span></span> <span class="token punctuation">)</span> <span class="token keyword">return</span> redirect <span class="token punctuation">(</span> <span class="token string">"/"</span> <span class="token punctuation">)</span> <span class="token keyword">else</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> abort <span class="token punctuation">(</span> <span class="token number">404</span> <span class="token punctuation">)</span> <span class="token comment"># Uncomment this line to debug local</span> <span class="token comment"># app.run()</span> |
In this paragraph we need to create Project Keys
(similar to API key) in the interface below, drive
and db
are objects that help us interact with the database and drive:
1 2 3 4 | deta <span class="token operator">=</span> Deta <span class="token punctuation">(</span> <span class="token string">"PROJECT_KEY_HERE"</span> <span class="token punctuation">)</span> drive <span class="token operator">=</span> deta <span class="token punctuation">.</span> Drive <span class="token punctuation">(</span> <span class="token string">"files"</span> <span class="token punctuation">)</span> db <span class="token operator">=</span> deta <span class="token punctuation">.</span> Base <span class="token punctuation">(</span> <span class="token string">"payload_db"</span> <span class="token punctuation">)</span> |
The route part, we will create a route to catch all (catch all requests) and then check:
- If path
index
=> go to upload page. - If it’s path
delete
=> go to file delete page - Otherwise, the default is to process and return file content (if any exist).
Deta has also provided us with methods to interact with the DB:
1 2 | db <span class="token punctuation">.</span> put <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token string">"path"</span> <span class="token punctuation">:</span> submitted_path <span class="token punctuation">,</span> <span class="token string">"filename"</span> <span class="token punctuation">:</span> filename <span class="token punctuation">,</span> <span class="token string">"mime"</span> <span class="token punctuation">:</span> mime <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
Used to insert a record into the DB. We will save the path
(to check if there are duplicates), filename
is randomly generated by uuid
, mime
entered by the user or taken from the uploaded file. The data in the DB will have the following form:
1 2 | {'filename': 'ee8945e3-b7aa-4d0a-829a-b472aecb1ef2', 'key': '2zd58xhd6hvi', 'path': 'abc.png'} |
1 2 | db <span class="token punctuation">.</span> fetch <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token string">"path"</span> <span class="token punctuation">:</span> submitted_path <span class="token punctuation">}</span> <span class="token punctuation">,</span> limit <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">)</span> |
used to retrieve data, can query exactly or follow a syntax close to MongoDB: https://docs.deta.sh/docs/base/queries .
1 2 | db <span class="token punctuation">.</span> delete <span class="token punctuation">(</span> items <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">[</span> <span class="token string">'key'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> |
Used to delete files based on key. You can also interact directly through the interface at https://web.deta.sh/home:
Very simple, right? Interacting with Drive is also quite similar:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment"># Upload file</span> drive <span class="token punctuation">.</span> put <span class="token punctuation">(</span> filename <span class="token punctuation">,</span> content <span class="token punctuation">,</span> content_type <span class="token operator">=</span> mime <span class="token punctuation">)</span> <span class="token comment"># Đọc nội dung file</span> <span class="token builtin">file</span> <span class="token operator">=</span> drive <span class="token punctuation">.</span> get <span class="token punctuation">(</span> items <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">[</span> <span class="token string">'filename'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> content <span class="token operator">=</span> <span class="token builtin">file</span> <span class="token punctuation">.</span> read <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token builtin">file</span> <span class="token punctuation">.</span> close <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment"># Xóa file theo filename </span> drive <span class="token punctuation">.</span> delete <span class="token punctuation">(</span> items <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">[</span> <span class="token string">'filename'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> |
Drive also has an intuitive interface:
Frontend
No colors, flowers, pure HTML interface, no CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <span class="token doctype"><span class="token punctuation"><!</span> <span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token attr-name">lang</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> en <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">charset</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> UTF-8 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">http-equiv</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> X-UA-Compatible <span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> IE=edge <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> viewport <span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> width=device-width, initial-scale=1.0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> title</span> <span class="token punctuation">></span></span> Payload Server <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> title</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> Payload Server <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> {% with messages = get_flashed_messages() %} {% if messages %} <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ul</span> <span class="token punctuation">></span></span> {% for message in messages %} <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token punctuation">></span></span> {{ message }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> {% endfor %} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ul</span> <span class="token punctuation">></span></span> {% endif %} {% endwith %} <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h2</span> <span class="token punctuation">></span></span> Upload <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h2</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> form</span> <span class="token attr-name">action</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> / <span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> multipart/form-data <span class="token punctuation">"</span></span> <span class="token attr-name">method</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> post <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> file <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> file <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> br</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> br</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> path <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> URL Path <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> path <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> text <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> br</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> br</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> mime <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> MIME (default to <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> code</span> <span class="token punctuation">></span></span> text/plain <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> code</span> <span class="token punctuation">></span></span> or file's mime) <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> mime <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> text <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> br</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> br</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> path <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Content (if no file is selected) <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> textarea</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> content <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> content <span class="token punctuation">"</span></span> <span class="token attr-name">cols</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 50 <span class="token punctuation">"</span></span> <span class="token attr-name">rows</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 5 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> textarea</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> br</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> br</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> submit <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> form</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h2</span> <span class="token punctuation">></span></span> List payloads <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h2</span> <span class="token punctuation">></span></span> {% if items %} <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ul</span> <span class="token punctuation">></span></span> {% for item in items %} {% set p = item['path']%} <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> /{{p}} <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> /{{p}} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a</span> <span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> /delete?p={{p}} <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Delete <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> {% endfor %} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ul</span> <span class="token punctuation">></span></span> {% endif %} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
It’s Demo Time
Run deta deloy
and see the result: https://8r8cjf.deta.dev/
Limit
Of course, with a Free service like this, it will come with some main limitations:
- The micros are actually running on Lambda so boot time (after sleep) can be slow.
- RAM is only 512MB.
- Requests will time-out after 10 seconds, so processes cannot run for a long time.
- If you do not upload to Drive, you can only upload to the
/tmp/
. - The drive has a capacity of 10GB.
- Library up to 250MB, source code up to 250MB.
More details at: https://docs.deta.sh/docs/micros/about
But for the purpose of prototype and demo, this is still OK la
Also what else?
Deta also provides some pretty useful utilities:
- Deta Crons allows to run tasks periodically (like cronjob in Linux).
- Deta Visor allows us to view the request/response log to the microphone and the error log.
- Allow custom subdomain (for example: https://myserver.deta.dev/ ) and own domain, too convenient for dev brothers to make wedding invitation web
Conclude
Hope everyone makes good use of Deta and has a lot of good ideas