liaoch commited on
Commit
3c95dc3
·
1 Parent(s): ca0439a

Update README.md: Remove Azure deployment section and add local macOS testing instructions

Browse files
Files changed (1) hide show
  1. README.md +37 -128
README.md CHANGED
@@ -89,157 +89,66 @@ This is the recommended way to run the application, as it bundles all dependenci
89
  * **Start:** `docker start mermaid-app`
90
  * **Remove (after stopping):** `docker rm mermaid-app`
91
 
92
- ---
93
-
94
- # Deployment to Azure Ubuntu VM
95
 
96
- These steps guide you through deploying the application using Gunicorn and Nginx.
97
 
98
- ### 1. Connect to your VM
99
 
100
- Connect to your Azure Ubuntu VM using SSH:
101
  ```bash
102
- ssh your_username@your_vm_ip_address
103
- ```
104
 
105
- ### 2. Install System Dependencies
106
-
107
- Update package lists and install necessary software:
108
- ```bash
109
- sudo apt update
110
- sudo apt install -y python3 python3-pip python3-venv nodejs npm nginx gunicorn
111
  ```
112
- * `python3`, `python3-pip`, `python3-venv`: For running the Python application.
113
- * `nodejs`, `npm`: Required by `@mermaid-js/mermaid-cli`.
114
- * `nginx`: Web server to act as a reverse proxy.
115
- * `gunicorn`: WSGI server to run the Flask application.
116
 
117
- Verify Node.js and npm installation: `node -v`, `npm -v`.
118
 
119
- ### 3. (Optional but Recommended) Install Mermaid CLI Globally
120
-
121
- While the `mermaid_renderer.py` script attempts to install `mmdc` if not found, it's often more reliable to install it manually on the server first:
122
  ```bash
123
- # Use --unsafe-perm if needed, especially when running as root/sudo
124
- sudo npm install -g @mermaid-js/mermaid-cli --unsafe-perm=true --allow-root
125
  # Verify installation
126
  mmdc --version
127
  ```
128
 
129
- ### 4. Transfer Application Files
130
-
131
- * Create a directory for the application on the VM:
132
- ```bash
133
- sudo mkdir -p /var/www/mermaid-app
134
- # Set appropriate ownership (replace 'your_vm_user' with your actual user)
135
- sudo chown your_vm_user:your_vm_user /var/www/mermaid-app
136
- cd /var/www/mermaid-app
137
- ```
138
- * From your **local machine**, copy the application files to the VM using `scp` or `rsync`. Replace placeholders:
139
- ```bash
140
- scp -r /path/to/local/app.py /path/to/local/mermaid_renderer.py /path/to/local/requirements.txt /path/to/local/templates your_username@your_vm_ip_address:/var/www/mermaid-app/
141
- ```
142
-
143
- ### 5. Set Up Python Virtual Environment
144
 
145
- On the VM, navigate to the application directory and set up the environment:
146
  ```bash
147
- cd /var/www/mermaid-app
148
  python3 -m venv venv
149
- source venv/bin/activate
150
- pip install -r requirements.txt
151
- deactivate # Deactivate for now, systemd will handle activation
152
- ```
153
-
154
- ### 6. Configure systemd for Gunicorn
155
 
156
- Create a systemd service file to manage the Gunicorn process.
 
157
 
158
- * Create the file:
159
- ```bash
160
- sudo nano /etc/systemd/system/mermaid-app.service
161
- ```
162
- * Paste the following content. **Important:**
163
- * Replace `your_vm_user` with the Linux user that should run the application (this user needs permissions for the app directory and potentially for npm global installs if `mmdc` wasn't pre-installed). Using your own user is fine for single-user setups. `www-data` is common if Nginx runs as `www-data`.
164
- * **Set a strong, unique `FLASK_SECRET_KEY`!** Generate one using `python -c 'import os; print(os.urandom(24))'`.
165
-
166
- ```ini
167
- [Unit]
168
- Description=Gunicorn instance to serve Mermaid Live Renderer
169
- After=network.target
170
-
171
- [Service]
172
- User=your_vm_user
173
- Group=your_vm_user # Or www-data if User is www-data
174
- WorkingDirectory=/var/www/mermaid-app
175
- # Add venv's bin to the PATH and set the secret key
176
- Environment="PATH=/var/www/mermaid-app/venv/bin"
177
- Environment="FLASK_SECRET_KEY=replace_with_your_strong_random_secret_key"
178
- # Command to start Gunicorn
179
- ExecStart=/var/www/mermaid-app/venv/bin/gunicorn --workers 3 --bind unix:/var/www/mermaid-app/mermaid-app.sock -m 007 app:app
180
-
181
- Restart=always
182
-
183
- [Install]
184
- WantedBy=multi-user.target
185
- ```
186
 
187
- * Save and close the file (Ctrl+X, then Y, then Enter in `nano`).
188
- * Start and enable the service:
189
- ```bash
190
- sudo systemctl start mermaid-app
191
- sudo systemctl enable mermaid-app
192
- # Check status (look for 'active (running)')
193
- sudo systemctl status mermaid-app
194
- # Check for errors if it failed
195
- # sudo journalctl -u mermaid-app
196
- ```
197
- *Troubleshooting:* If the service fails, check permissions on `/var/www/mermaid-app` and the socket file (`mermaid-app.sock` which Gunicorn creates). Ensure the `User` specified can write the socket file. The `-m 007` in the `ExecStart` makes the socket group-writable, which helps if Nginx runs as a different group (like `www-data`).
198
 
199
- ### 7. Configure Nginx as Reverse Proxy
200
 
201
- Configure Nginx to forward web requests to the Gunicorn socket.
 
 
 
 
202
 
203
- * Create an Nginx configuration file:
204
- ```bash
205
- sudo nano /etc/nginx/sites-available/mermaid-app
206
- ```
207
- * Paste the following, replacing `your_domain_or_vm_ip` with your VM's public IP address or a domain name pointing to it:
208
- ```nginx
209
- server {
210
- listen 80;
211
- server_name your_domain_or_vm_ip;
212
-
213
- location / {
214
- include proxy_params;
215
- # Forward requests to the Gunicorn socket
216
- proxy_pass http://unix:/var/www/mermaid-app/mermaid-app.sock;
217
- }
218
- }
219
- ```
220
- * Save and close the file.
221
- * Enable the site by creating a symbolic link:
222
- ```bash
223
- # Remove default site if it exists and conflicts
224
- # sudo rm /etc/nginx/sites-enabled/default
225
- sudo ln -s /etc/nginx/sites-available/mermaid-app /etc/nginx/sites-enabled/
226
- ```
227
- * Test Nginx configuration and restart:
228
- ```bash
229
- sudo nginx -t
230
- # If syntax is OK:
231
- sudo systemctl restart nginx
232
- ```
233
 
234
- ### 8. Configure Firewall
235
 
236
- * **Azure NSG:** In the Azure portal, go to your VM's Networking settings. Add an inbound security rule to allow traffic on port 80 (HTTP) from the internet (Source: `Any` or `Internet`).
237
- * **VM Firewall (ufw):** If `ufw` is active on the VM, allow Nginx traffic:
238
- ```bash
239
- sudo ufw allow 'Nginx Full'
240
- # Check status if needed: sudo ufw status
241
- ```
242
 
243
- ### 9. Access the Application
244
 
245
- Open your web browser and navigate to `http://your_domain_or_vm_ip`. You should see the Mermaid Live Renderer interface.
 
 
 
89
  * **Start:** `docker start mermaid-app`
90
  * **Remove (after stopping):** `docker rm mermaid-app`
91
 
92
+ ## Local Development on macOS
 
 
93
 
94
+ To test the application locally on macOS without Docker:
95
 
96
+ ### 1. Install System Dependencies
97
 
98
+ Install Node.js and Python if not already installed:
99
  ```bash
100
+ # Using Homebrew (recommended)
101
+ brew install node python3
102
 
103
+ # Or download from official websites:
104
+ # Node.js: https://nodejs.org/
105
+ # Python: https://www.python.org/downloads/
 
 
 
106
  ```
 
 
 
 
107
 
108
+ ### 2. Install Mermaid CLI
109
 
110
+ Install the Mermaid CLI globally:
 
 
111
  ```bash
112
+ npm install -g @mermaid-js/mermaid-cli
 
113
  # Verify installation
114
  mmdc --version
115
  ```
116
 
117
+ ### 3. Set Up Python Virtual Environment
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
 
119
+ Navigate to the project directory and set up the environment:
120
  ```bash
121
+ # Create a virtual environment
122
  python3 -m venv venv
 
 
 
 
 
 
123
 
124
+ # Activate the virtual environment
125
+ source venv/bin/activate
126
 
127
+ # Install Python dependencies
128
+ pip install -r requirements.txt
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
 
130
+ # Deactivate when done (optional)
131
+ # deactivate
132
+ ```
 
 
 
 
 
 
 
 
133
 
134
+ ### 4. Run the Application
135
 
136
+ With the virtual environment activated:
137
+ ```bash
138
+ # Set environment variables (optional but recommended)
139
+ export FLASK_SECRET_KEY='your_secret_key_here'
140
+ export FLASK_DEBUG=true
141
 
142
+ # Run the application
143
+ python app.py
144
+ ```
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
145
 
146
+ ### 5. Access the Application
147
 
148
+ Open your web browser and navigate to `http://localhost:7860`.
 
 
 
 
 
149
 
150
+ ### 6. Development Notes
151
 
152
+ * The application will automatically reload when code changes are detected (due to `FLASK_DEBUG=true`)
153
+ * Press `Ctrl+C` to stop the application
154
+ * Remember to activate the virtual environment (`source venv/bin/activate`) before running the application in future sessions