오윤석

개발 환경 설정

1 +/app/config/*.secret
2 +/app/node/node_modules
...\ No newline at end of file ...\ No newline at end of file
1 +version: "3"
2 +services:
3 +
4 + web:
5 + image: nginx
6 + container_name: nginx
7 + ports:
8 + - "8081:80"
9 + networks:
10 + mynet:
11 + ipv4_address: 172.28.0.2
12 + volumes:
13 + - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
14 + - ./web:/var/www/html
15 + restart: on-failure
16 + links:
17 + - app
18 +
19 + svelte:
20 + image: node
21 + container_name: svelte
22 + working_dir: /var/www/html
23 + volumes:
24 + - ./web:/var/www/html
25 + command: bash -c "npm install && npm run dev"
26 + restart: on-failure
27 +
28 + app:
29 + image: node
30 + container_name: node
31 + ports:
32 + - "8082:80"
33 + networks:
34 + mynet:
35 + ipv4_address: 172.28.0.3
36 + working_dir: /app
37 + volumes:
38 + - ./node:/app
39 + - ./config:/app/config
40 + command: bash -c "npm install && node app.js"
41 + environment:
42 + - NODE_ENV=production
43 + restart: on-failure
44 +
45 +networks:
46 + mynet:
47 + ipam:
48 + driver: default
49 + config:
50 + - subnet: 172.28.0.0/16
...\ No newline at end of file ...\ No newline at end of file
1 +server {
2 + listen 80;
3 + server_name localhost;
4 + access_log /var/log/nginx/access.log.1;
5 + error_log /var/log/nginx/error.log.1;
6 +
7 + location /api {
8 + proxy_pass http://172.28.0.3;
9 + }
10 +
11 + location / {
12 + root /var/www/html/public;
13 + index index.html;
14 + }
15 +}
...\ No newline at end of file ...\ No newline at end of file
1 +let express = require('express');
2 +let app = express();
3 +let bodyParser = require('body-parser');
4 +let routes = require('./routes');
5 +
6 +app.use(bodyParser.urlencoded({ extended: false }));
7 +app.use(bodyParser.json());
8 +
9 +app.get('/api/home', routes.home);
10 +
11 +let server = app.listen(80);
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 +{
2 + "name": "node",
3 + "version": "1.0.0",
4 + "description": "",
5 + "main": "app.js",
6 + "scripts": {
7 + "test": "echo \"Error: no test specified\" && exit 1"
8 + },
9 + "author": "",
10 + "license": "ISC",
11 + "dependencies": {
12 + "express": "^4.17.1",
13 + "http": "0.0.1-security"
14 + }
15 +}
1 +module.exports = function(req, res) {
2 + res.send('this is home');
3 +}
...\ No newline at end of file ...\ No newline at end of file
1 +let routes = {};
2 +routes.home = require('./home');
3 +
4 +module.exports = routes;
...\ No newline at end of file ...\ No newline at end of file
1 +/node_modules/
2 +/public/build/
3 +
4 +.DS_Store
1 +*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
2 +
3 +---
4 +
5 +# svelte app
6 +
7 +This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
8 +
9 +To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
10 +
11 +```bash
12 +npx degit sveltejs/template svelte-app
13 +cd svelte-app
14 +```
15 +
16 +*Note that you will need to have [Node.js](https://nodejs.org) installed.*
17 +
18 +
19 +## Get started
20 +
21 +Install the dependencies...
22 +
23 +```bash
24 +cd svelte-app
25 +npm install
26 +```
27 +
28 +...then start [Rollup](https://rollupjs.org):
29 +
30 +```bash
31 +npm run dev
32 +```
33 +
34 +Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
35 +
36 +By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
37 +
38 +
39 +## Building and running in production mode
40 +
41 +To create an optimised version of the app:
42 +
43 +```bash
44 +npm run build
45 +```
46 +
47 +You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
48 +
49 +
50 +## Single-page app mode
51 +
52 +By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
53 +
54 +If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
55 +
56 +```js
57 +"start": "sirv public --single"
58 +```
59 +
60 +
61 +## Deploying to the web
62 +
63 +### With [now](https://zeit.co/now)
64 +
65 +Install `now` if you haven't already:
66 +
67 +```bash
68 +npm install -g now
69 +```
70 +
71 +Then, from within your project folder:
72 +
73 +```bash
74 +cd public
75 +now deploy --name my-project
76 +```
77 +
78 +As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
79 +
80 +### With [surge](https://surge.sh/)
81 +
82 +Install `surge` if you haven't already:
83 +
84 +```bash
85 +npm install -g surge
86 +```
87 +
88 +Then, from within your project folder:
89 +
90 +```bash
91 +npm run build
92 +surge public my-project.surge.sh
93 +```
This diff is collapsed. Click to expand it.
1 +{
2 + "name": "svelte-app",
3 + "version": "1.0.0",
4 + "scripts": {
5 + "build": "rollup -c",
6 + "dev": "rollup -c -w",
7 + "start": "sirv public"
8 + },
9 + "devDependencies": {
10 + "@rollup/plugin-commonjs": "11.0.2",
11 + "@rollup/plugin-node-resolve": "^7.0.0",
12 + "rollup": "^1.20.0",
13 + "rollup-plugin-livereload": "^1.0.0",
14 + "rollup-plugin-svelte": "^5.0.3",
15 + "rollup-plugin-terser": "^5.1.2",
16 + "svelte": "^3.0.0"
17 + },
18 + "dependencies": {
19 + "rollup-plugin-copy": "^3.3.0",
20 + "sirv-cli": "^0.4.4",
21 + "svelte-spa-router": "^2.1.0"
22 + }
23 +}
1 +html, body {
2 + position: relative;
3 + width: 100%;
4 + height: 100%;
5 +}
6 +
7 +body {
8 + color: #333;
9 + margin: 0;
10 + padding: 8px;
11 + box-sizing: border-box;
12 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 +}
14 +
15 +a {
16 + color: rgb(0,100,200);
17 + text-decoration: none;
18 +}
19 +
20 +a:hover {
21 + text-decoration: underline;
22 +}
23 +
24 +a:visited {
25 + color: rgb(0,80,160);
26 +}
27 +
28 +label {
29 + display: block;
30 +}
31 +
32 +input, button, select, textarea {
33 + font-family: inherit;
34 + font-size: inherit;
35 + padding: 0.4em;
36 + margin: 0 0 0.5em 0;
37 + box-sizing: border-box;
38 + border: 1px solid #ccc;
39 + border-radius: 2px;
40 +}
41 +
42 +input:disabled {
43 + color: #ccc;
44 +}
45 +
46 +input[type="range"] {
47 + height: 0;
48 +}
49 +
50 +button {
51 + color: #333;
52 + background-color: #f4f4f4;
53 + outline: none;
54 +}
55 +
56 +button:disabled {
57 + color: #999;
58 +}
59 +
60 +button:not(:disabled):active {
61 + background-color: #ddd;
62 +}
63 +
64 +button:focus {
65 + border-color: #666;
66 +}
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <meta charset='utf-8'>
5 + <meta name='viewport' content='width=device-width,initial-scale=1'>
6 +
7 + <title>Svelte app</title>
8 +
9 + <link rel='icon' type='image/png' href='/favicon.png'>
10 + <link rel='stylesheet' href='/global.css'>
11 + <link rel='stylesheet' href='/build/bundle.css'>
12 +
13 + <script defer src='/build/bundle.js'></script>
14 +</head>
15 +
16 +<body>
17 +</body>
18 +</html>
1 +import svelte from 'rollup-plugin-svelte';
2 +import resolve from '@rollup/plugin-node-resolve';
3 +import commonjs from '@rollup/plugin-commonjs';
4 +import livereload from 'rollup-plugin-livereload';
5 +import { terser } from 'rollup-plugin-terser';
6 +import copy from 'rollup-plugin-copy';
7 +
8 +const production = !process.env.ROLLUP_WATCH;
9 +
10 +export default {
11 + input: 'src/main.js',
12 + output: {
13 + sourcemap: true,
14 + format: 'iife',
15 + name: 'app',
16 + file: 'public/build/bundle.js'
17 + },
18 + plugins: [
19 + svelte({
20 + // enable run-time checks when not in production
21 + dev: !production,
22 + // we'll extract any component CSS out into
23 + // a separate file - better for performance
24 + css: css => {
25 + css.write('public/build/bundle.css');
26 + }
27 + }),
28 +
29 + // If you have external dependencies installed from
30 + // npm, you'll most likely need these plugins. In
31 + // some cases you'll need additional configuration -
32 + // consult the documentation for details:
33 + // https://github.com/rollup/plugins/tree/master/packages/commonjs
34 + resolve({
35 + browser: true,
36 + dedupe: ['svelte']
37 + }),
38 + commonjs(),
39 +
40 + copy({
41 + targets:[
42 + { src:'src/images', dest:'public' }
43 + ]
44 + }),
45 +
46 + // In dev mode, call `npm run start` once
47 + // the bundle has been generated
48 + !production && serve(),
49 +
50 + // Watch the `public` directory and refresh the
51 + // browser on changes when not in production
52 + !production && livereload('public'),
53 +
54 + // If we're building for production (npm run build
55 + // instead of npm run dev), minify
56 + production && terser()
57 + ],
58 + watch: {
59 + clearScreen: false
60 + }
61 +};
62 +
63 +function serve() {
64 + let started = false;
65 +
66 + return {
67 + writeBundle() {
68 + if (!started) {
69 + started = true;
70 +
71 + require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
72 + stdio: ['ignore', 'inherit', 'inherit'],
73 + shell: true
74 + });
75 + }
76 + }
77 + };
78 +}
1 +<script>
2 + import Router from 'svelte-spa-router';
3 + import routes from './routes';
4 +</script>
5 +
6 +<Router {routes} />
...\ No newline at end of file ...\ No newline at end of file
1 +import App from './App.svelte';
2 +
3 +const app = new App({
4 + target: document.body,
5 + props: {
6 + name: 'world'
7 + }
8 +});
9 +
10 +export default app;
...\ No newline at end of file ...\ No newline at end of file
1 +import Home from './routes/Home.svelte';
2 +
3 +const routes = {
4 + '/': Home,
5 +};
6 +
7 +export default routes;
...\ No newline at end of file ...\ No newline at end of file
1 +<main>
2 + <h1>Hello, This is Home!</h1>
3 + <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
4 +</main>
5 +
6 +<style>
7 + main {
8 + text-align: center;
9 + padding: 1em;
10 + max-width: 240px;
11 + margin: 0 auto;
12 + }
13 +
14 + h1 {
15 + color: #ff3e00;
16 + text-transform: uppercase;
17 + font-size: 4em;
18 + font-weight: 100;
19 + }
20 +
21 + @media (min-width: 640px) {
22 + main {
23 + max-width: none;
24 + }
25 + }
26 +</style>
...\ No newline at end of file ...\ No newline at end of file