|
| 1 | +--- |
| 2 | +title: Virtual Network Computing |
| 3 | +description: Learn how to set up a VNC in Coder. |
| 4 | +--- |
| 5 | + |
| 6 | +This guide will show you how to set up a virtual network computing (VNC) system |
| 7 | +in Coder. |
| 8 | + |
| 9 | +Coder does not have a specific set of VNC providers it supports. Coder will |
| 10 | +render the VNC, as long as it is installed on the image used to create the |
| 11 | +environment. |
| 12 | + |
| 13 | +## Step 1: Create the Dockerfile |
| 14 | + |
| 15 | +To begin, create a Dockerfile that you'll use to build an |
| 16 | +[image](../../images/index.md) with a virtual network computing (VNC) provider |
| 17 | +installed. |
| 18 | + |
| 19 | +Be sure to set the `HOME`, `USER`, and `PORT` environment variables in the |
| 20 | +Dockerfile: |
| 21 | + |
| 22 | +```text |
| 23 | +HOME=/home/coder |
| 24 | +USER coder |
| 25 | +PORT 1234 |
| 26 | +``` |
| 27 | + |
| 28 | +**Note:** Set `PORT` to the appropriate port number for your VNC instance. |
| 29 | + |
| 30 | +> To help you get started, see this |
| 31 | +> [sample image](https://github.com/cdr/enterprise-images/tree/main/images/vnc) |
| 32 | +> that uses [noVNC](https://github.com/novnc/noVNC) as the client and |
| 33 | +> [TigerVNC](https://tigervnc.org) as the server. |
| 34 | +
|
| 35 | +## Step 2: Build and push the image to Docker Hub |
| 36 | + |
| 37 | +Once you've created your image, build and push it to Docker Hub: |
| 38 | + |
| 39 | +```console |
| 40 | +docker build . -t <yourusername>/vnc |
| 41 | +docker push <yourusername>/vnc |
| 42 | +``` |
| 43 | + |
| 44 | +## Step 3: Import the image into Coder |
| 45 | + |
| 46 | +Now that your image is available via Docker Hub, you can import it for use in |
| 47 | +Coder. |
| 48 | + |
| 49 | +1. Log in to Coder and go to **Images** > **Import Image** |
| 50 | + |
| 51 | +1. Import or select a [registry](../../admin/registries/index.md). |
| 52 | + |
| 53 | +1. Provide the **Repository** and **Tag** of the VNC image. Optionally, you can |
| 54 | + include a **Description** and the **Source Repo URL** that refers to the |
| 55 | + image's source. |
| 56 | + |
| 57 | +1. Set the recommended resources (CPU cores, memory, disk space) for your VNC |
| 58 | + instance. |
| 59 | + |
| 60 | +1. Click **Import Image**. |
| 61 | + |
| 62 | +## Step 4: Create an environment with the image |
| 63 | + |
| 64 | +Once you've imported your image into Coder, you can use it to create an |
| 65 | +environment. |
| 66 | + |
| 67 | +1. In the Coder UI, go to the **environment overview** page. Click **New |
| 68 | + Environment** and choose **Custom Environment** |
| 69 | + |
| 70 | +1. Provide an **Environment Name**, and indicate that your **Image Source** is |
| 71 | + **Existing**. |
| 72 | + |
| 73 | +1. Select your **Image** and associated **Tag**. |
| 74 | + |
| 75 | + > If you're using the sample image provided above, make sure to leave the |
| 76 | + > **Run as Container-based Virtual Machine** option _unchecked_; this image |
| 77 | + > doesn't currently include support for [CVMs](../../environments/cvms.md). |
| 78 | +
|
| 79 | +1. Click **Create Environment** |
| 80 | + |
| 81 | +## Step 5: Create a Dev URL and access the VNC |
| 82 | + |
| 83 | +Now that you've created your environment, you'll need to create a |
| 84 | +[dev URL](../../environments/devurls.md) so that you can access its services. |
| 85 | + |
| 86 | +1. From the **environment overview** page, click **Add URL** |
| 87 | + |
| 88 | +1. Provide the **Port** number that the VNC is running on (this information is |
| 89 | + defined in the image you used to build this environment). |
| 90 | + |
| 91 | +1. Provide a **name** for the dev URL. |
| 92 | + |
| 93 | +1. Click **Save**. |
| 94 | + |
| 95 | +You can now access the VNC in Coder by clicking the **Open in Browser** icon |
| 96 | +(this will launch a separate window). |
0 commit comments