Version 2.1.0

.env.example

@@ -0,0 +1,2 @@
+BING_MAP_API_KEY=""
+ALLOWED_DOMAINS=""

.gitignore

@@ -1,2 +1,5 @@
 .DS_Store
-bingMapAPIKEY
+bingMapAPIKEY
+.env
+node_modules
+package-lock.json

Dockerfile

@@ -1,4 +1,7 @@
-FROM nginx:alpine
-COPY . /usr/share/nginx/html
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+FROM node:20-alpine
+WORKDIR /usr/src/app
+COPY package*.json ./
+RUN npm install
+COPY . .
+EXPOSE 8966
+CMD ["node", "server.js"]

README.md

@@ -11,8 +11,8 @@
 
 Notes: You can use my demo, but please don't use it for commercial purposes. If you want to use it for commercial purposes, please deploy it yourself.
 
-[![Deploy with Vercel](https://raw.githubusercontent.com/jason5ng32/MyIP/main/res/img/Vercel.svg)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fjason5ng32%2FMyIP&project-name=MyIP&repository-name=MyIP)
-[![Deploy with Docker](https://raw.githubusercontent.com/jason5ng32/MyIP/main/res/img/Docker.svg)](https://hub.docker.com/r/jason5ng32/myip)
+[![Deploy with Vercel](https://raw.githubusercontent.com/jason5ng32/MyIP/main/public/res/img/Vercel.svg)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fjason5ng32%2FMyIP&project-name=MyIP&repository-name=MyIP)
+[![Deploy with Docker](https://raw.githubusercontent.com/jason5ng32/MyIP/main/public/res/img/Docker.svg)](https://hub.docker.com/r/jason5ng32/myip)
 
 ## 👀 Main Features
 
@@ -32,22 +32,60 @@ Notes: You can use my demo, but please don't use it for commercial purposes. If
 
 ## 📕 How to Use
 
-The tool is almost ready to use straight out of the box. Just download the entire codebase and deploy it on your local machine or server. No additional setup is required.
+3 Ways to Deploy:
 
-There are 2 ways to display a map showing the location of an IP:
+### Deploying in a Node Environment
 
-1. Click on the + Add button next to the map display button and fill in the API KEY, then map function will be enabled and always available in current browser.
-2. Or, you can modify `res/app.js`, in the `data` section, locate:
+1. Clone the code.
+2. Install:
 
-```javascript
-bingMapAPIKEY: '',
+    ```bash
+    npm install
+    ```
+
+3. Run:
+
+    ```bash
+    npm start
+    ```
+
+The program will run on port 8966.
+
+If you want to add Bing Maps, make the following changes before starting:
+
+Create environment variables:
+
+```bash
+mv .env.example .env
+```
+
+Modify the Bing Maps API Key and your domain (to prevent abuse) in `.env` .
+
+```bash
+BING_MAP_API_KEY="YOU_KEY_HERE"
+ALLOWED_DOMAINS="example.com"
 ```
 
-Enter your Bing Map API Key here. Upon doing so, the map functionality on the homepage will activate automatically for all users.
+### Using Vercel
 
-Applying for this API key is free and includes up to 120,000 requests per year at no cost, adequate for personal use. For larger projects, consider adjusting the program to avoid embedding the key in the frontend code.
+Click the 'Deploy to Vercel' button at the top to complete the deployment.
 
-If you don't need map functionality, the program can also be deployed easily with a single click on Vercel.
+If you want to display maps, set the following 2 environment variables during deployment:
+
+```bash
+BING_MAP_API_KEY
+ALLOWED_DOMAINS
+```
+
+### Using Docker
+
+Click the 'Deploy to Docker' button at the top to complete the deployment.
+
+If you wish to display maps, set the Bing Map API Key and allowed domains during deployment:
+
+```bash
+docker run -d -p 8966:8966 -e BING_MAP_API_KEY="YOUR_KEY_HERE" -e ALLOWED_DOMAINS="example.com" myip
+```
 
 ## 👩🏻‍💻 Advanced Usage
 
@@ -66,4 +104,7 @@ DOMAIN-SUFFIX,ipify.org,Proxy
 
 ## 🌟 Star History
 
-[![Star History Chart](https://api.star-history.com/svg?repos=jason5ng32/MyIP&type=Date)](https://star-history.com/#jason5ng32/MyIP&Date)
+[![Star History Chart](https://api.star-history.com/svg?repos=jason5ng32/MyIP&type=Date)](https://star-history.com/#jason5ng32/MyIP&Date)
+
+
+docker run -d -p 8966:3000 -e BING_MAP_API_KEY="Am27Bsy1tM3G4a6CQZ10Sva7FaKgzsg527w_RB1M0TtB288Fnc99KfCmAm3TAFr0" -e ALLOWED_DOMAINS="localhost,myip.cn404.com,ipcheck.ing" myipn

README_CN.md

@@ -11,8 +11,8 @@
 
 备注：你可以直接用我已经搭建好的服务，也可以自行搭建。
 
-[![Deploy with Vercel](https://raw.githubusercontent.com/jason5ng32/MyIP/main/res/img/Vercel.svg)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fjason5ng32%2FMyIP&project-name=MyIP&repository-name=MyIP)
-[![Deploy with Docker](https://raw.githubusercontent.com/jason5ng32/MyIP/main/res/img/Docker.svg)](https://hub.docker.com/r/jason5ng32/myip)
+[![Deploy with Vercel](https://raw.githubusercontent.com/jason5ng32/MyIP/main/public/res/img/Vercel.svg)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fjason5ng32%2FMyIP&project-name=MyIP&repository-name=MyIP)
+[![Deploy with Docker](https://raw.githubusercontent.com/jason5ng32/MyIP/main/public/res/img/Docker.svg)](https://hub.docker.com/r/jason5ng32/myip)
 
 这是一个完全开源的 IP 信息查看器，可以查询本机 IP、查询任意 IP、查询国内外网站可用性等。这是我第一次用 Vue.js 练手的项目。我……只是一个普通的产品经理。
 
@@ -34,24 +34,60 @@
 
 ## 📕 如何使用
 
-几乎开箱即用。直接下载所有代码，放到你本地或服务器上就行，没啥额外步骤。
+3 种部署方式：
 
-如果你希望能够显示 IP 所在地的地图，有 2 个方法：
+### 在 Node 环境部署
 
-1. 在网页中点击地图显示按钮旁边的 + 号，填入 API KEY，这个 KEY 会一直在这个浏览器生效
-2. 或者，直接修改源文件，在 `res/app.js` ，在 `data` 部分，找到：
+1. 克隆代码
+2. 安装：
 
-```javascript
-bingMapAPIKEY: '',
+    ```bash
+    npm install
+    ```
+
+3. 运行：
+
+    ```bash
+    npm start
+    ```
+
+程序会运行在 8966 端口。
+
+如果你想添加 Bing 地图，在启动之前，进行如下修改：
+
+创建环境变量：
+
+```bash
+mv .env.example .env
 ```
 
-在这里添加你的 Bing Map API Key，添加后，首页的地图按钮就会自动变为可用状态，此时，你所有的用户都可以使用地图。
+修改 `.env` 里的 Bing 地图 API Key 以及你的域名（防止滥用）。
+
+```bash
+BING_MAP_API_KEY="YOU_KEY_HERE"
+ALLOWED_DOMAINS="example.com"
+```
 
-申请这个 API 是免费的，一年可以发起 12w 次免费请求，个人玩应该足够用了。如果真要搞大家伙的东西，就自己改一下程序吧，别把 key 放到前端代码里……
+### 使用 Vercel
 
-如果你连申请都懒得折腾，也可以考虑使用 Google Maps 的 iframe 嵌入。程序里已经注释了这部分的代码，你可以根据实际的情况进行反注释。不过，使用 iframe 实在有点脏脏的感觉。
+点击顶部的部署到 Vercel 按钮，即可完成部署。
 
-如果你不打算增加地图功能，其实也可以在 Vercel 上一键部署。
+如果希望展示地图，则在部署的时候，设置下面 2 个环境变量：
+
+```bash
+BING_MAP_API_KEY
+ALLOWED_DOMAINS
+```
+
+### 使用 Docker
+
+点击顶部的部署到 Docker 按钮，即可完成部署。
+
+如果你希望展示地图，则在部署的时候，设置 Bing Map API Key 和允许的域名：
+
+```bash
+docker run -d -p 8966:8966 -e BING_MAP_API_KEY="YOUR_KEY_HERE" -e ALLOWED_DOMAINS="example.com" myip
+```
 
 ## 👩🏻‍💻 高级用法
 

api/map.js

@@ -0,0 +1,32 @@
+const https = require('https');
+
+module.exports = (req, res) => {
+    // 限制只能从指定域名访问
+    const allowedDomains = ['localhost', ...(process.env.ALLOWED_DOMAINS || '').split(',')];
+
+    const referer = req.headers.referer;
+
+    if (referer) {
+        const domain = new URL(referer).hostname;
+        if (!allowedDomains.includes(domain)) {
+            return res.status(403).json({ error: 'Access denied' });
+        }
+    } else {
+        return res.status(403).json({ error: 'No referer header' });
+    }
+
+    const { latitude, longitude, language } = req.params;
+    const mapSize = '800,640';
+    const pp = `${latitude},${longitude};66`;
+    const fmt = 'jpeg';
+    const dpi = 'Large';
+    const apiKey = process.env.BING_MAP_API_KEY;
+
+    const url = `https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/${latitude},${longitude}/5?mapSize=${mapSize}&pp=${pp}&key=${apiKey}&fmt=${fmt}&dpi=${dpi}&c=${language}`;
+
+    https.get(url, apiRes => {
+        apiRes.pipe(res);
+    }).on('error', (e) => {
+        res.status(500).json({ error: e.message });
+    });
+};

api/validate-map-key.js

@@ -0,0 +1,7 @@
+module.exports = (req, res) => {
+    if (process.env.BING_MAP_API_KEY) {
+        res.status(200).json({ isValid: true });
+    } else {
+        res.status(200).json({ isValid: false });
+    }
+};

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "myip",
+  "version": "2.1.0",
+  "description": "A better IP Toolbox",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jason5ng32/MyIP.git"
+  },
+  "author": "Jason Ng",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jason5ng32/MyIP/issues"
+  },
+  "homepage": "https://github.com/jason5ng32/MyIP#readme",
+  "dependencies": {
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "http-proxy-middleware": "^2.0.6"
+  }
+}

index.html → public/index.html

@@ -108,13 +108,11 @@ <h2 id="IPInfo" class="col-4" :class="{'mobile-h2' : isMobile }">🕵️
 
               <div>
                 <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault"
-                  @change="toggleMaps" :checked="isMapShown" :disabled="!bingMapAPIKEY">
+                  @change="toggleMaps" :checked="isMapShown" :disabled="!isEnvBingMapKey">
 
                 <label class="form-check-label" for="flexSwitchCheckDefault">
-                  <i :class="['bi', bingMapAPIKEY ? 'bi bi-map-fill':'bi bi-map']"></i>
+                  <i :class="['bi', isEnvBingMapKey ? 'bi bi-map-fill':'bi bi-map']"></i>
                 </label>
-                <i :class="['bi ', !bingMapAPIKEY ? 'bi-plus-circle-fill':'bi-pencil-square']" data-bs-toggle="modal"
-                  data-bs-target="#addBingMapKey"></i>
 
               </div>
 
@@ -419,40 +417,6 @@ <h5 class="modal-title" id="IPCheck">{{currentTexts.ipcheck.Title}}</h5>
       </div>
     </div>
 
-    <!-- BingMap Modal -->
-    <div class="modal fade" id="addBingMapKey" tabindex="-1" aria-labelledby="addBingMapKey" aria-hidden="true">
-      <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
-          <div class="modal-header" :class="{ 'dark-mode-border': isDarkMode }">
-            <h5 class="modal-title" id="addBingMapKey">{{currentTexts.addBingMapKey.Title}}</h5>
-            <button type="button" class="btn-close" :class="{ 'dark-mode-close-button': isDarkMode }"
-              data-bs-dismiss="modal" aria-label="Close"></button>
-
-          </div>
-          <div class="modal-body" :class="{ 'dark-mode': isDarkMode }">
-            <p class="fw-light">{{ currentTexts.addBingMapKey.Note }}</p>
-            <input type="text" class="form-control mb-2" :class="{ 'dark-mode': isDarkMode }"
-              :placeholder="currentTexts.addBingMapKey.Placeholder" v-model="inputBingMapAPIKEY"
-              @keyup.enter="addBingMapKey">
-            <div v-if="bingMapAPIKEYError" class="text-danger">{{ currentTexts.addBingMapKey.Error }}</div>
-
-
-          </div>
-          <div class="modal-footer" :class="{ 'dark-mode-border': isDarkMode }">
-            <button v-if="bingMapAPIKEY" type="button" class="btn btn-danger"
-              @click="removeBingMapKey">{{currentTexts.addBingMapKey.removeButton}}</button>
-
-            <button type="button" class="btn btn-primary"
-              :class="{ 'btn-secondary': !isValidKey(inputBingMapAPIKEY), 'btn-primary': isValidKey(inputBingMapAPIKEY) }"
-              @click="addBingMapKey"
-              :disabled="!isValidKey(inputBingMapAPIKEY)">{{currentTexts.addBingMapKey.Button}}</button>
-
-          </div>
-
-        </div>
-      </div>
-    </div>
-
     <!-- help modal -->
     <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModal" aria-hidden="true">
       <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">